• support@answerspoint.com

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


Is there a CSS-only way to style a dropdown? I need to style a 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

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.



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;
  <option selected>Pineapples</option>
  • answered 7 years ago
  • Sunny Solu

Your Answer

    Facebook Share        
  • asked 8 years ago
  • viewed 2456 times
  • active 8 years ago

Best Rated Questions