Firefox/Internet explorer behavior with selecting/highlighting an item in the select tag

Question

I've noticed that in firefox, when you click on the arrow to open a 'select' tag of the dropdown, and then point at one option, the row is highlighted in blue color background as I expect, that is OK.

But in Internet Explorer, when you click on the option you want to select and it becomes the selected option, the blue highlighting remains until you click somewhere else outside the select tag.

Is there any way to change that behavior?

Answer 1

One way would be to use JavaScript. I've used jQuery to make it easier: JSFiddle example.

$('select').change(function() {
    $(this).blur();
})

This removes focus from the element when an option has been selected.

To do this pure JavaScript you'd use onchange.

Answer 2

I had this issue and used James Donnelly's solution but also wanted to prevent the highlight remaining if the current option is selected (try James' jsfiddle in IE or see wilsonrufus's comment).

Putting a click handler on the options seems to get around that:

var select = $('select');

select.change(function() {
    select.blur();
})

$('select option').click(function() {
    select.blur();
})