CSS selected pseudo class similar to checked but for select elements

Question

Is there a way to style the currently selected  lt option gt  element in a  lt select gt  element   I could then give a background color to the currently selected option element  That way I can style the option that s currently viewable in the closed dropdown

User · Answer

Actually you can only style few CSS properties on :modified option elements. color does not work, background-color either, but you can set a background-image.

You can couple this with gradients to do the trick.

_x000D_

option:hover,_x000D_
option:focus,_x000D_
option:active,_x000D_
option:checked {_x000D_
  background: linear-gradient(#5A2569, #5A2569);_x000D_
}

_x000D_

<select>_x000D_
  <option>A</option>_x000D_
  <option>B</option>_x000D_
  <option>C</option>_x000D_
</select>

_x000D_

Works on gecko/webkit.

User · Answer

the  checked pseudo-class initially applies to such elements that have the HTML4 selected and checked attributes   Source  w3 org    So  this CSS works  although styling the color is not possible in every browser   option checked   color  red        An example of this in action  hiding the currently selected item from the drop down list    x000D   x000D  option checked   display none    x000D   lt select gt  x000D       lt option gt A lt  option gt  x000D       lt option gt B lt  option gt  x000D       lt option gt C lt  option gt  x000D   lt  select gt  x000D   x000D   x000D      To style the currently selected option in the closed dropdown as well  you could try reversing the logic   select   color  red    option not  checked    color  black       or whatever your default style is

User · Answer

This worked for me    select option      color  black    select not  checked       color  gray

[html] CSS :selected pseudo class similar to :checked, but for <select> elements

Examples related to html

Examples related to css

Examples related to css-selectors

Examples related to pseudo-class