• support@answerspoint.com

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

577

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.

1Answer


0

Important Update!

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;
}
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;
  
}
/*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>
  • answered 2 years ago
  • G John

Your Answer

    Facebook Share