Hi there wonderful people. I have a question, it may be only related to firefox but, how do I change the color of the selected <option> when the focus is in and out of the <select>? I don't mean on :hover that works fine I'm talking when you click on a <option> and after that when you click out of the <select> object.

The intention is to change the background-color/color of the selected <option> when the <select> is in focus or not in focus. In Firefox it shows in windows system blue/white with dotted outline and in Chrome is showing in a lightb blue/white on focus and white/grey on out of focus... I don't want that.

CSS

.select_style{
   background-color: #555;
}
.select_style option{
  background-color: #ccc;
}
.select_style option:hover{
  background-color: #0f0;
}

HTML

<select class="select_style" size='3' multiple='multiple'>
  <option value="">Please choose</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
</select>