how can i change this behaviour of select tag in IE

Question

Here is my problem:

I've got a select tag with two options - "Hello" and "World"

html

<select>
<option> Hello </option>
<option> World </option>
</select>

In IE when you choose an option and and it becomes the selected option the blue highlighting remains until you click somewhere else outside the select tag. (In firefox it's not that way)

SO I wrote a script removes focus from the element when an option has been selected.

script

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

But still one little problem stays: if i choose Hello and then gain Hello option - the focus will remain and the blue highlighting. But if I choose hello and then world option -everything works.. I read that For select menus, the change event occurs when an option is selected!!!But the option has to be different from the previous selected to trigger the change event.

Is there any way this blue highlighting not to occur even if you choose again the same option.

Answer 1

You can use a click event on select options, assuming select has id select :

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

DEMO: http://jsfiddle.net/DJCe7/

EDIT

If options are added dynamically, then do (assuming select has id select :)

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

EDIT 2

Get same result pressing enter:

$('#select').keydown(function(event) {
    // Enter pressed
    if(event.keyCode == 13) {
        $('select').blur();
    }
});

DEMO: http://jsfiddle.net/DJCe7/10/

Answer 2

How about blurring it on focus? Not sure how this will behave in IE though.

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

http://jsfiddle.net/b26f5/

Edit: Silly me, you could actually just remove the outline with CSS. No need to use Javascript!

select, select:focus, select:active { outline: none; }

http://jsfiddle.net/b26f5/1/