removing the focus of an select

Question

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

Answer 1

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

Answer 2

Try this in the css:

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

I think that's what you are looking for.