Problem with CSS class on SELECT

Problem with CSS class on SELECT

Here is a sample code to explain the problem:
  2. CSS part:
  3. option.sel { color:red }

  5. HTML part:
  6. <select id="test">
  7. <option value="1" selected>1</option>
  8. <option value="2">2</option>
  9. <option value="3">3</option>
  10. </select>

  12. jQuery part:
  13. $("#test option:selected").addClass("sel")


When testing this sample code on several browsers, I get different results:

  • On IE8 the selected option is red on the current selected box, but is still black into the popup list
  • On FF or Chrome the selected option is still black on the current selected box, but is red into the popup list
All seems to be wrong, this option should be red everywhere it appears.