Hide / edit the appearance of select

Question

Hide / edit the appearance of select

Navigation

#1 by (2 votes)
#2 by (0 votes)
#3 by (0 votes)

4

I'm cracking my head to try to get the select from my site to agree with my css. In fact, only in Mozilla that the saying whose does not look the desired.

I was looking for some jQuery to do editing these elements, but the problem is that on my site they will have 2 different-looking selects, ie if I use a jQuery ready it will leave both selects looking the same. For this, I will have to use 2 jQuerys, which I do not want and I think it will get heavy.

Is there any jquery command to delete the "little set" of select? Only the one that is spoiling the look in Mozilla.

I tried creating a div with overflow "hidden" and leaving the select larger in width, so it would hide the arrow, but the width of <option> also widens. I also tried editing the size of <option> but did not accept this type of customization.

Demo code:

<select>
    <option>um</option>
    <option>dois</option>
</select>

select {
    -webkit-appearance:none;
    -moz-appearance:none;
    -o-appearance:none;
    appearance:none;
    text-indent: 0.01px; 

    background: transparent;
    width:185px;
    height:22px;
    font-size:18px;
    border:0;
    color:#CC9;
    outline: none
}

option {
    font-size:13px;
    border:0;
    background-color:#1063A0;
    outline: none;
    width:100px; /* queria editar a largura do option tbm */
}

Preview: link

html jquery css select

asked by anonymous 26.08.2014 / 14:56

3 answers

2

Hello, leave your code as is, unfortunately this is a bug of the new mozilla 30 +

Look

link

But to everyone's happiness already know this, just wait for the next update

26.08.2014 / 17:18

0

An alternative to remove the "setinha" is to use the datalist with an input using the list attribute.

<input list="browsers">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

Reference.

26.08.2014 / 21:19

Problem with 'echo -e' Language C - Prime numbers in vectors

score 0 · Accepted Answer

After reading your suggestions and read more about this case by Google, I decided to create a "gambiarra", which is currently working.

The <select> is inside a div, and this div is fixed width and overflow:hidden . In%% I left with a width greater than the div, and as it is hidden, the arrow will disappear.

Example: link (run in Chrome and Mozilla)

The only problem is that the width of <select> will also be the size of <option> .