<option>
elements within the select element in CSSHow 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.
I want to style like this or as close as possible.
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?
This question is related to
css
html-select
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.
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...
Source: Stackoverflow.com