MY question may be stupid but I want to know if there is a chance to change this behaviour.

I've noticed that when you click on the arrow of select tag to open the options of the dropdown and when you point at one option, it's highlighted in blue color background and that's OK.

But in IE 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 (it's not that way in firefox - ). BUt i understood whAT I should do and removed the focus from the element when an option has been selected.

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

But still one little problem stays - if the option that is selected is the same as the previous (for example I choose one element two times consecutively)the focus stays on select and the blue highlighting is on again. Is there any way to change that

MY question may be stupid but I want to know if there is a chance to change this behaviour.

I've noticed that when you click on the arrow of select tag to open the options of the dropdown and when you point at one option, it's highlighted in blue color background and that's OK.

But in IE 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 (it's not that way in firefox - ). BUt i understood whAT I should do and removed the focus from the element when an option has been selected.

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

But still one little problem stays - if the option that is selected is the same as the previous (for example I choose one element two times consecutively)the focus stays on select and the blue highlighting is on again. Is there any way to change that

• javascript
• html
• css
• internet-explorer

• Did you try select{outline:none;} ? – Vucko Commented Feb 28, 2013 at 19:26
• 1 What is your question? – Hogan Commented Feb 28, 2013 at 19:27
• Try $('select').change(function() { $(this).children('option).blur() }); – Jeff Shaver Commented Feb 28, 2013 at 19:29
• Is your goal to change the blue highlight behavior, or to blur the select? – Aaron Kurtzhals Commented Feb 28, 2013 at 19:29
• 2 Removing focus from an element just because it changed is pretty bad from an accessibility standpoint. If I have focus on the select and use the keyboard and use the up/down keys to change the options, each keypress counts as a change event. Similarly, if I start typing in 'United' (to jump to 'United States of America') in your country select box, each jump counts as a change event. Don't break accessibility for vanity reasons. – cimmanon Commented Feb 28, 2013 at 19:32

3 Answers 3

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

Try this in the css:

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

I think that's what you are looking for.

You can set the selected dropdowns background colour in css with:

select:focus { 
    background: #fff;
}

As for removing the focus of the element I you are going to create more problems than you resolve and I would reconsider if it's necessary.