CODEWITHSUNDEEP
javascripthtmlcss
arieltools
arieltools

Reputation: 1204

HTML <select> selected option background-color CSS style

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.

Upvotes: 30

Views: 193651

Answers (10)

Renato Camargos
Renato Camargos

Reputation: 81

I think the solution you may been looking for is:

option:checked {
  box-shadow: 0 0 10px 100px #FFFF00 inset; }

Upvotes: 6

Rajendra
Rajendra

Reputation: 11

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");
}

Upvotes: -3

Matthew Wise
Matthew Wise

Reputation: 2849

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; }

Upvotes: 1

Plast&#243;nico
Plast&#243;nico

Reputation: 25

In CSS:

SELECT OPTION:checked { background-color: red; }

Upvotes: -2

automaticAllDramatic
automaticAllDramatic

Reputation: 2063

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....

Upvotes: 2

Master V
Master V

Reputation: 151

<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...

Upvotes: 14

Olli Etuaho
Olli Etuaho

Reputation: 303

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.

Upvotes: 0

N 1.1
N 1.1

Reputation: 12524

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);

Upvotes: 16

DisgruntledGoat
DisgruntledGoat

Reputation: 72510

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.

Upvotes: 5

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114347

Currently CSS does not support this feature.

You can build your own or use a plug-in that emulates this behaviour using DIVs/CSS.

Upvotes: 2

Related Questions