Hide/edit the <select> appearance

Asked

Viewed 843 times

4

I’m racking my brain trying to get my site’s select to match my css. In fact, only in Mozilla that said whose does not look like desired.

I went in search of some jQuery that make editing these elements, but the problem is that on my site will have 2 selects of different appearance, IE, if I use a jQuery ready it will leave both selects with the same appearance. For that, I will have to use 2 jQuerys, which I do not want and I think will be heavy.

Isn’t there a jquery command that eliminates the "arrow" of select? Only it is ruining the appearance in Mozilla.

I tried to create a div with overflow "Hidden" and let the select larger in width, so would hide the arrow, but the width of the <option> also enlarges. I also tried to edit the size of <option> but does not accept this kind of customization.

Demonstrative 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 */
}

Visualization: http://jsfiddle.net/n56o2k2j/

jquery html css select

  • Interesting: This Feature is non-standard and is not on a standards track. Do not use it on Production sites facing the Web: it will not work for Every user. There may also be large incompatibilities between implementations and the behavior may change in the Future.

  • I was able to switch to Chrome: http://answall.com/questions/7651/howto customize the scroll-on-no-chrome that I needed, you can try doing as I did but using the Firefox-specific attributes.

  • From what I’ve been reading, Mozilla allowed changing the appearance of select, but in an update it ended up "bugging" and not allowing more. :\

3 answers

2

  • Yes. I’m afraid so.

0


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

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

Example: http://jsfiddle.net/tmty4gr9/ (run on Chrome and Mozilla)

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

0

An alternative to remove the "arrow" 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.

  • 1

    I did a quick test on the fiddle and the arrow does not appear in the FF but appears in Chrome. And it gives a problem of having to focus first and click again to be able to appear the dropdown...

Browser other questions tagged jquery html css select

You are not signed in. Login or sign up in order to post.