Is there a style for a select option's "selected" color? For example:
<HTML>
<BODY>
<FORM NAME="form1">
<SELECT NAME="mySelect" SIZE="7" style="background-color:red;">
<OPTION>Test 1
<OPTION>Test 2
<OPTION>Test 3
<OPTION>Test 4
<OPTION>Test 5
<OPTION>Test 6
<OPTION>Test 7
</SELECT>
</FORM>
</BODY>
</HTML>
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.
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 < this.childElementCount; i++){
options[i].style.color = 'white';
}
var selected = this.children[this.selectedIndex];
selected.style.color = 'red';
}, false);
<select name=protect_email size=1 style="background: #009966; color: #FFF;" onChange="this.style.backgroundColor=this.options[this.selectedIndex].style.backgroundColor">
<option value=0 style="background: #009966; color: #FFF;" selected>Protect my email</option>;
<option value=1 style="background: #FF0000; color: #FFF;">Show email on advert</option>;
</select>;
http://pro.org.uk/classified/Directory?act=book&category=120
Tested it in FF,Opera,Konqueror worked fine...
I think the solution you may been looking for is:
option:checked {
box-shadow: 0 0 10px 100px #FFFF00 inset; }
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.
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....
Currently CSS does not support this feature.
You can build your own or use a plug-in that emulates this behaviour using DIVs/CSS.
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 <select> element so that it resembles Firefox's focus indication:
select:focus::-ms-value {
background: transparent;
color: inherit;
outline-style: dotted;
outline-width: thin;
}
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.
In CSS:
SELECT OPTION:checked { background-color: red; }
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");
}
