Question

<select class='FunctieSelect'> <option class='yellow' value='-1'>- kies -</option> <option class='yellow' value='1'>KSZ functie</option> <option class='yellow' value='2'>Bakker</option> <option class='yellow' value='3'>Schilder</option> <option class='yellow' value='4'>Andere</option> </select> 

with

.yellow {     background-color: Yellow; } 

produces the following output:

alt text http://thomasstock.net/selectCss.JPG

In reality, only one of the options will have a yellow background, so setting the css on the select is not going to help me

=> How do I make the option stay yellow when it is selected?

I know a possible solution is using jquery to make an ‘change’ event, check in the change event which option is selected, and then set the css of the select. But I wonder if there’s an easier solution.

Answer 1

Agreed with Andrew. One other thing you might think about, though, is that usability goes down when you change form elements’ styles. If you mean to denote a changed part of a form you might just highlight the box around the select.