How to modify SELECT tag's default highlight behaviour in IE and Opera?

问题

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.

回答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

回答2:

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

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

Here's a dabblet demo

回答3:

This can't really be done as it is default browser behavior. Your best option is probably replacing the select boxes with similar functionality that can be styled, such as the jQuery Chosen plugin.

来源：https://stackoverflow.com/questions/13170137/how-to-modify-select-tags-default-highlight-behaviour-in-ie-and-opera

标签

jquery

css

selection

option