CODEWITHSUNDEEP
htmlcssinternet-explorerfirefoxhtml-select
user1966221
user1966221

Reputation: 159

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

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?

Upvotes: 6

Views: 2892

Answers (3)

Rohrbs
Rohrbs

Reputation: 1855

This will take care of selecting a new option as well as selecting the same option:

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

Upvotes: 0

Tom Elmore
Tom Elmore

Reputation: 1980

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();
})

Upvotes: 4

James Donnelly
James Donnelly

Reputation: 128791

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.

Upvotes: 5

Related Questions