HTML select selected option background-color CSS style

Question

Is there a style for a select option s  selected  color  For example    lt HTML gt   lt BODY gt   lt FORM NAME  form1  gt   lt SELECT NAME  mySelect  SIZE  7  style  background-color red   gt   lt OPTION gt Test 1  lt OPTION gt Test 2  lt OPTION gt Test 3  lt OPTION gt Test 4  lt OPTION gt Test 5  lt OPTION gt Test 6  lt OPTION gt Test 7  lt  SELECT gt   lt  FORM gt   lt  BODY gt   lt  HTML gt    When I select an option it turns blue  I want to override this and make it a different color  In the style I expected something like  selected-color   but it doesn t exist

User · Answer

In principle  you can style it using option selected  as selector  but that doesn t work in many browsers   Also  that only allows you to style the selected option  not the option that has hover focus   Tested to work in Chrome 9 and Firefox 3 6  doesn t work in Internet Explorer 8

User · Answer

Currently CSS does not support this feature   You can build your own or use a plug-in that emulates this behaviour using DIVs CSS

User · Answer

I realise this is an old post  but in case it helps  you can apply this CSS to have IE11 draw a dotted outline for the focus indication of a  lt select gt  element so that it resembles Firefox s focus indication  select focus  -ms-value     background  transparent    color  inherit    outline-style  dotted    outline-width  thin

User · Answer

This syntax will work in XHTML and does not work in IE6  but this is a non-javascript way   option selected    background   f00      If you want to do this on-the-fly  then you would have to go with javascript  the way others have suggested

User · Answer

I think the solution you may been looking for is   option checked     box-shadow  0 0 10px 100px  FFFF00 inset

User · Answer

lt select name protect email size 1 style  background   009966  color   FFF   onChange  this style backgroundColor this options this selectedIndex  style backgroundColor  gt       lt option value 0 style  background   009966  color   FFF   selected gt Protect my email lt  option gt      lt option value 1 style  background   FF0000  color   FFF   gt Show email on advert lt  option gt    lt  select gt      http   pro org uk classified Directory act book amp category 120  Tested it in FF Opera Konqueror  worked fine

User · Answer

In CSS   SELECT OPTION checked   background-color  red

User · Answer

We Can override the blue color in to our custom color  It works for Internet Explorer  Firefox and Chrome   By using this below following CSS   option  checked  option  hover       Color   ffffff      background   614767 repeat url  data image gif base64 R0lGODlh8ACgAPAAAGFGZQAAACH5BAAAAAAALAAAAADwAKAAAAL hI py 0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTNf2jef6zvf DwwKh8Si8YhMKpfMpvMJjUqn1Kr1is1qt9yu9wsOi8fksvmMTqvX7Lb7DY L5 S6 Y7P6 f8vv8PGCg4SFhoeIiYqLjI2Oj4CBkpOUlZaXmJmam5ydnp QkaKjpKWmp6ipqqusra6voKGys7S1tre4ubq7vL2 v7CxwsPExcbHyMnKy8zNzs AwdLT1NXW19jZ2tvc3d7f0NHi4 Tl5ufo6err7O3u7 Dh8vP09fb3 Pn6  z9 v w8woMCBBAsaPIgwocKFDBs6fAgxosSJFCtavIhRVgEAOw

User · Answer

You cannot rely on CSS for form elements  The results vary wildly across all the browsers  I don t think Safari lets you customize any form elements at all   Your best bet is to use a plugin like jqTransform  uses jQuery    EDIT  that page doesn t seem to be working at the moment  There is also Custom Form Elements which supports MooTools and may support jQuery in the future

User · Answer

You may not be able to do this using pure CSS  But  a little javascript can do it nicely  A crude way to do it - var sel   document getElementById  select id    sel addEventListener  click   function el       var options   this children      for var i 0  i  lt  this childElementCount  i             options i  style color    white             var selected   this children this selectedIndex           selected style color    red          false

[javascript] HTML <select> selected option background-color CSS style

Examples related to javascript

Examples related to html

Examples related to css