Question

Here is my HTML:

<select style="background-color:#e0f0f1">
  <option selected="selected">Select</option>
  <option class="" value="one">One</option>
  <option class="" value="two">Two</option>
</select>

See this code in action

In IE and Opera, when you select an option, it is highlighted with a blue background colour. Firefox, Chrome and Safari don’t do this. Is there a way or trick to remove that blue highlight when the option is selected so that the original background colour is always shown?

If that’s not possible, is there a way to add a jQuery behaviour that simulates a click elsewhere on the page right after the option is selected? So basically when you click away from the selected option, the highlight disappears.

Answer 1

I think I found a solution to this. Perhaps not a very clean solution but this trick works.

I’ve tested it in Firefox, Chrome, Safari, Opera and IE 9. Works on all of them but does not work on older versions of IE (6 and 7). Haven’t tested in IE8. If someone can test it on Mac and let me know if this works, that’ll be great.

I added an input field with width and height as 0 and shifting focus to it when an option is clicked. Using display:none and visibility:hidden in the input field does not work. So you will have hide the input field somewhere in the corner or using z-index to move it behind a container might work too (but haven’t tried this). If anyone has a better solution, let me know.

HTML:

 `<select style="background-color:#e0f0f1">
    <option selected="selected">Select</option>
    <option class="" value="one">One</option>
    <option class="" value="two">Two</option>
  </select>
  <input type="text" id="abc" style="width:0; height:0;" />`

jQuery:

$(document).ready(function(){
  $('select option').on('click', function() { $('#abc').focus(); });
});

See this in Fiddle