How to style the option with only CSS

Question

Note  This question is not about making a custom dropdown  It s only about possibilities of styling  lt option gt  elements within the select element in CSS  How can I style  lt option gt s of a  lt select gt  element with cross-browser compatibility  I know many JavaScript ways which customize the dropdown to convert into  lt li gt   which I m not asking about    lt select class  select  gt       lt option selected gt Select lt  option gt       lt option gt Blue lt  option gt       lt option  gt Red lt  option gt       lt option gt Green lt  option gt       lt option gt Yellow lt  option gt       lt option gt Brown lt  option gt   lt  select gt    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

User · Answer

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

User · Answer

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

User · Answer

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    x000D   x000D  div    x000D    margin  10px  x000D    padding  10px   x000D    border  2px solid purple   x000D    width  200px  x000D    -webkit-border-radius  5px  x000D    -moz-border-radius  5px  x000D    border-radius  5px  x000D    x000D  div  gt  ul   display  none    x000D  div hover  gt  ul  display  block  background   f9f9f9  border-top  1px solid purple   x000D  div hover  gt  ul  gt  li   padding  5px  border-bottom  1px solid  4f4f4f   x000D  div hover  gt  ul  gt  li hover   background  white   x000D  div hover  gt  ul  gt  li hover  gt  a   color  red    x000D   lt div gt  x000D    Select x000D     lt ul gt  x000D       lt li gt  lt a href     gt Item 1 lt  a gt  lt  li gt  x000D       lt li gt  lt a href     gt Item 2 lt  a gt  lt  li gt  x000D       lt li gt  lt a href     gt Item 3 lt  a gt  lt  li gt  x000D     lt  ul gt  x000D   lt  div gt  x000D   x000D   x000D    EDIT  Here is the question that you asked some time ago   How to style a  lt select gt  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

[css] How to style the <option> with only CSS?

Examples related to css

Examples related to html-select