How to style a <select> dropdown with CSS only without JavaScript?

Is there a CSS-only way to style a <select> dropdown?
I need to style a <select> form as much as humanly possible, without any JavaScript. What are the properties I can use to do so in CSS?
This code needs to be compatible with all major browsers:
  • Internet Explorer 6,7 and 8
  • Firefox
  • Safari
I know I can make it with JavaScript: Example.
And I'm not talking about simple styling. I want to know, what the best we can do with CSS only.
I found similar questions on Stack Overflow.
And this one on Doctype.com.

Solution:


In addition to webkit, as of Firefox V35 we'll be able to use the appearance property.
(From the above link:)
      Using -moz-appearance with the none value on a combobox now remove the dropdown button
So now in order to hide the default styling - it's as easy as adding the following rules on our select element:
select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}
For IE 11 support, you can use ::-ms-expand.
select::-ms-expand { /* for IE 11 */
    display: none;
}

Step #1 - FIDDLE

Next, to add our own custom arrow we just add a background image.

Step #2 - FIDDLE

The problem now is that no version of IE currently supports the appearance property.
So we have to remove the background image on IE...

Step #3 (FINAL) - FIDDLE

select {
  margin: 50px;
  border: 1px solid #111;
  background: transparent;
  width: 150px;
  padding: 5px 35px 5px 5px;
  font-size: 16px;
  border: 1px solid #ccc;
  height: 34px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url(http://www.stackoverflow.com/favicon.ico) 96% / 15% no-repeat #eee;
}
/*target Internet Explorer 9 and Internet Explorer 10:*/

@media screen and (min-width: 0\0) {
  select {
    background: none;
    padding: 5px;
  }
}
<select>
  <option>Apples</option>
  <option selected>Pineapples</option>
  <option>Chocklate</option>
  <option>Pancakes</option>
</select>
If the custom arrow is necessary on IE or on Firefox - prior to V35 - then keep reading...
Here are two additional solutions to achieve a custom arrow on a select element:

#1 - Hide the default arrow - (Source)

FIDDLE

Wrap the select element in a div with a fixed width and overflow:hidden.
Then give the select element a width of about 20 pixels greater than the div.
The result is that the default drop-down arrow of the select element will be hidden (due to the overflow:hidden on the container), and you can place any background image you want on the right-hand-side of the div.
The advantage of this approach is that it is cross-browser (Internet Explorer 8 and later, WebKit, and Gecko). However, the disadvantage of this approach is that the options drop-down juts out on the right-hand-side (by the 20 pixels which we hid... because the option elements take the width of the select element).
enter image description here
[It should be noted, however, that if the custom select element is necessary for MOBILE this above problem doesn't apply - because of the way each phone natively opens the select element. So for mobile, this is probably the best solution.
.styled select {
  background: transparent;
  width: 150px;
  font-size: 16px;
  border: 1px solid #ccc;
  height: 34px;
}
.styled {
  margin: 50px;
  width: 120px;
  height: 34px;
  border: 1px solid #111;
  border-radius: 3px;
  overflow: hidden;
  background: url(http://www.stackoverflow.com/favicon.ico) 96% / 20% no-repeat #eee;
}
<div class="styled">
  <select>
    <option>Pineapples</option>
    <option selected>Apples</option>
    <option>Chocklate</option>
    <option>Pancakes</option>
  </select>
</div>


#2 - Use the pointer-events property (Source)

FIDDLE

The idea here is to overlay an element over the native drop down arrow (to create our custom one) and then disallow pointer events on it.
Advantage: Works well in WebKit and Gecko. It looks good too (no jutting out option elements)
Disadvantage: Internet Explorer (IE10 and down) doesn't support pointer-events, which means you can't click the custom arrow. Also, another (obvious) disadvantage with this method is that you can't target your new arrow image with a hover effect or hand cursor, because we have just disabled pointer events on them!
However, with this method you can use Modernizer or conditional comments to make Internet Explorer revert to the standard built in arrow.
NB: Being that Internet Explorer 10 doesn't support conditional comments anymore: If you want to use approach #2, you should probably use Modernizr. However, it is still possible to exclude the pointer-events CSS from Internet Explorer 10 with a CSS hack described here.

TAGS : | | | |