How to create a <option> style with CSS only?

Question

Possible duplicate:
How to style a <select> css drop-down list only without javascript?
Html Select window options in Hover?

Note. This question is not about creating a custom dropdown. It's only about styling options for <option> elements with CSS.

How can I style the <option> of the <select> element with compatibility between browsers? I know many JavaScript methods that configure a drop-down list to convert to <li> , which I am 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 ask what can only be possible with CSS, with compatibility for IE9 +, Firefox and Chrome.

I want the style to be that way or as close as possible.

I tried here http://jsfiddle.net/jitendravyas/juwz3/3/ , but Chrome does not show the style except the font color, while Firefox shows a little more. How to get border and padding in Chrome too?

Answer 1

EDIT 2015 May

Disclaimer: I took a snippet from the answer below:

Important update!

In addition to WebKit, with Firefox 35 , we can use the appearance property

Using -moz-appearance with a value of none in the combo box, remove the drop down button

So now, to hide the default style, it’s just as easy to add the following rules to our select element:

 select { -webkit-appearance: none; -moz-appearance: none; appearance: none; } 

To support IE 11, you can use [ ::-ms-expand ] [15].

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

Old answer

Unfortunately, what you are asking for is not possible using pure CSS. However, here is something similar that you can choose as a job. Check out the 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 a question you asked a while ago. How to style a <select> dropdown with CSS only without JavaScript? As they say, only in Chrome and to some extent in Firefox can you achieve what you want. Otherwise, unfortunately, there is no transparent CSS solution with a cross browser to style the selection.

Answer 2

There are no elements to style with a browser, of course, not within your second screen shot. You may be able to make them bold and set the font size, but that will be about it ...

Answer 3

I played with select elements before and without redefining functionality using JavaScript, I don’t think this is possible in Chrome. Regardless of whether you use the plugin or write your own code, CSS is just not suitable for Chrome / Safari, and as you said, Firefox handles this better.