106

Note: This question is not about making a custom dropdown. It's only about possibilities of styling <option> elements within the select element in CSS

How can I style <option>s of a <select> element with cross-browser compatibility? I know many JavaScript ways which customize the dropdown to convert into <li>, which I'm not asking about.

<select class="select">
    <option selected>Select</option>
    <option>Blue</option>
    <option >Red</option>
    <option>Green</option>
    <option>Yellow</option>
    <option>Brown</option>
</select>

I'm asking what could be possible with CSS only, with compatibility for IE9+, Firefox, and Chrome.

enter image description here

I want to style like this or as close as possible.

enter image description here

I tried here http://jsfiddle.net/jitendravyas/juwz3/3/, but Chrome doesn't show any styling except font color, while Firefox shows some more. How to get border and padding work in Chrome too?

TylerH
  • 20,799
  • 66
  • 75
  • 101
Jitendra Vyas
  • 148,487
  • 229
  • 573
  • 852

3 Answers3

70

EDIT 2015 May

Disclaimer: I've taken the snippet from the answer linked below:

Important Update!

In addition to WebKit, as of Firefox 35 we'll be able to use the appearance property:

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][15].

select::-ms-expand { /* for IE 11 */
    display: none;
}

Old Answer

Unfortunately what you ask is not possible by using pure CSS. However, here is something similar that you can choose as a work around. Check the live code below.

div { 
  margin: 10px;
  padding: 10px; 
  border: 2px solid purple; 
  width: 200px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
div > ul { display: none; }
div:hover > ul {display: block; background: #f9f9f9; border-top: 1px solid purple;}
div:hover > ul > li { padding: 5px; border-bottom: 1px solid #4f4f4f;}
div:hover > ul > li:hover { background: white;}
div:hover > ul > li:hover > a { color: red; }
<div>
  Select
  <ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
  </ul>
</div>

EDIT

Here is the question that you asked some time ago. How to style a <select> dropdown with CSS only without JavaScript? As it tells there, only in Chrome and to some extent in Firefox you can achieve what you want. Otherwise, unfortunately, there is no cross browser pure CSS solution for styling a select.

Community
  • 1
  • 1
Savas Vedova
  • 5,622
  • 2
  • 28
  • 44
  • 3
    +1 thanks it's good code. but in my case i want to do with ` – Jitendra Vyas Dec 08 '11 at 12:42
  • 2
    @JitendraVyas, I know, but as I replied, that's not possible. What you have achieved in the first picture is the most that you can do. See th edit. By the way, I replied your previous question as well, please see it. – Savas Vedova Dec 08 '11 at 12:48
  • The 'important update' part infers that you can style `option` tags with css, but you cannot, you can only style the `select` tag. Which is shown in [this answer](http://stackoverflow.com/questions/14218307/select-arrow-style-change/42087251#42087251) – svnm Feb 07 '17 at 10:23
  • Here's a JavaScript version of the above example that adds callback and some other useful features: http://www.dynamicdrive.com/dynamicindex1/ergodropdown.htm – coco puffs Jan 24 '18 at 23:02
4

There is no cross-browser way of styling option elements, certainly not to the extent of your second screenshot. You might be able to make them bold, and set the font-size, but that will be about it...

danwellman
  • 9,068
  • 8
  • 60
  • 88
2

I've played around with select items before and without overriding the functionality with JavaScript, I don't think it's possible in Chrome. Whether you use a plugin or write your own code, CSS only is a no go for Chrome/Safari and as you said, Firefox is better at dealing with it.

Hafenkranich
  • 1,696
  • 18
  • 32
cchana
  • 4,899
  • 3
  • 33
  • 43