How to change default SELECT highlighting behavior in IE and Opera?

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 in blue. Firefox, Chrome, and Safari do not. Is there a way or trick to remove this blue highlight when the option is selected so that the original background color is always displayed?

If this is not possible, is there a way to add a jQuery behavior that mimics a click elsewhere on the page immediately after selecting an option? Thus, basically, when you click on the selected parameter, the backlight disappears.

Answer 1

I think I found a solution. This may not be a very clean solution, but this trick works.

I 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). Not tested in IE8. If someone can test it on a Mac and let me know if this works, it will be great.

I added an input box with a width and height like 0 and switching focus to it when I click a button. Use of the display: none and visibility: hidden in the input field does not work. This way you will hide the input field somewhere in the corner or use the z-index to move behind the container, which may work too (but have not 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 it in Fiddle

Answer 2

In IE11 (not sure about previous versions), you can remove the blue background from the focused selection element with

 select::-ms-value {background: none;} 

Here's the demo version of dabblet

Answer 3

This cannot be done because this is the default browser behavior. Your best bet is likely to replace the selection fields with similar functionality that you can style, such as jQuery Chosen .