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

【问题标题】：Firefox/Internet explorer behavior with selecting/highlighting an item in the select tagFirefox/Internet Explorer 在选择标签中选择/突出显示项目的行为
【发布时间】：2015-03-03 07:28:07
【问题描述】：

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

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

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

【问题讨论】：

harvesthq.github.com/chosen 我猜这个插件可以满足你在 IE 中的要求，但我猜

标签： html css internet-explorer firefox html-select

【解决方案1】：

一种方法是使用 JavaScript。我使用 jQuery 来简化它：JSFiddle example.

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

当一个选项被选中时，这会从元素上移除焦点。

要执行此纯 JavaScript，您需要使用 onchange。

【讨论】：

但是如果它没有改变呢？？ $(this).blur();不会发生
詹姆斯·唐纳利，你救了我的命：）谢谢你！它完美地工作
Donnely 很抱歉打扰您，但如果选择的选项与前一个相同（例如我连续两次选择 Hello），焦点将停留在选择和蓝色突出显示再次打开。有什么办法可以改变
我会对基于 css 的选项感兴趣，但这很好用

【解决方案2】：

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

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

var select = $('select');

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：