I have a Select Box and I'm trying to change the background color of the options when the Select box has been clicked and shows all the options.
html
css
select{ margin:40px; background: rgba(0,0,0,0.3); color:#fff; text-shadow:0 1px 0 rgba(0,0,0,0.4); } You need to put background-color on the option tag and not the select tag...
select option { margin: 40px; background: rgba(0, 0, 0, 0.3); color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); } If you want to style each one of the option tags.. use the css attribute selector:
select option { margin: 40px; background: rgba(0, 0, 0, 0.3); color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); } select option[value="1"] { /* value not val */ background: rgba(100, 100, 100, 0.3); } select option[value="2"] { /* value not val */ background: rgba(200, 200, 200, 0.3); } /* ... */ I don't know if you've considered it or not but if your application is based on coloring various groupings of items you should probably use the tag coupled with a class for further referencing. For example:
and then in the head of your document write the css like this:
Yes you can set this by oppisite way using this,
option:not(:checked) { } check this demo jsFiddle
select{ margin:40px; background: rgba(0,0,0,0.3); color:#FFF; text-shadow:0 1px 0 rgba(0,0,0,0.4); } option:not(:checked) { background-color: white; color:#000; } 
Similar to some of the answers, but not really stated, is to add a class to the actual option tag and use css classes...this is currently working for me without issue on IE (see above ss).
CSS:
.greenColor{ background-color: #33CC33; } .redColor{ background-color: #E60000; } $htmlIngressCss=''; add $htmlIngressCss in your html portion :)
Another option is to use Javascript:
if (document.getElementById('selectID').value == '1') { document.getElementById('optionID').style.color = '#000'; (Not as clean as the CSS attribute selector, but more powerful)
My selects would not color the background until I added !important to the style.
input, select, select option{background-color:#FFE !important} If you really want to style the within a , consider switching to a Javascript/CSS based drop down such as http://getbootstrap.com/2.3.2/components.html#dropdowns or https://silviomoreto.github.io/bootstrap-select/examples/. This because browsers such as IE do not allow styling of options within elements. Chrome/OSX also has this problem - you cannot style options.
However a warning is attached to that approach. These types of menus work very differently on mobile platforms because native elements aren't used. They can have annoying quirks on desktop as well. My advice is 1) don't write your own and 2) find a library that's been really well tested.
Here it goes what I've learned about the subject!
The CSS 2 specification did not address the problem of how form elements should be presented to users period!
Read here: smashing magazine
Eventually, you will never find any technical article from w3c or other addressed to this topic. Styling form elements in particular select boxes is not fully supported however, you can drive around... with some effort!
Don't waste time with hacks e such read the links and learn how pros get the job done!
JUST A LITTLE CONTRIBUTION IN CASE SOMEBODY LOOKING FOR IT.
http://jsfiddle.net/luiscastillo/sFx7f/
$(function(){ $('#tipo').focusin(function(){ $(this).css('color','red') }); $('#tipo').focusout(function(){ if(this.value === '') $(this).css('color','#ccc'); else $(this).css('color','red'); }); });