html - Firefox/Internet Explorer 在选择标签中选择/突出显示项目的行为

Question

我注意到，在 Firefox 中，当您单击箭头打开下拉列表的“选择”标签，然后指向一个选项时，该行以蓝色背景突出显示，正如我所料，没关系。

但是在 Internet Explorer 中，当您单击要选择的选项并使其成为选定选项时，蓝色突出显示将一直保持，直到您单击选择标记之外的其他位置。

有没有办法改变这种行为？

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

我遇到了这个问题并使用了 James Donnelly 的解决方案，但如果选择了当前选项，我也想防止突出显示（在 IE 中尝试 James 的 jsfiddle 或查看 wilsonrufus 的评论）。

在选项上放置一个点击处理程序似乎可以解决这个问题：

var select = $('select');

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

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

Answer 3

这将负责选择一个新选项以及选择相同的选项：

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