如何在 IE 和 Opera 中修改 SELECT 标签的默认高亮行为？答案

【问题标题】：How to modify SELECT tag's default highlight behaviour in IE and Opera?如何在 IE 和 Opera 中修改 SELECT 标签的默认高亮行为？
【发布时间】：2012-10-21 15:08:27
【问题描述】：

这是我的 HTML：

<select style="background-color:#e0f0f1">
  <option selected="selected">Select</option>
  <option class="" value="one">One</option>
  <option class="" value="two">Two</option>
</select>

See this code in action

在 IE 和 Opera 中，当您选择一个选项时，它会以蓝色背景色突出显示。 Firefox、Chrome 和 Safari 不这样做。有没有办法或技巧在选择该选项时移除蓝色突出显示，以便始终显示原始背景颜色？

如果这不可能，有没有办法添加一个 jQuery 行为，在选择选项后立即模拟页面上其他地方的点击？所以基本上，当您点击远离所选选项时，突出显示就会消失。

【问题讨论】：

标签： jquery css selection option

【解决方案1】：

在 IE11（不确定以前的版本）中，您可以使用以下命令从焦点选择元素中移除蓝色背景

select::-ms-value {background: none;}

Here's a dabblet demo

【讨论】：

这个解决方案非常适合我。该解决方案还帮助我们将注意力集中在选择元素上，我们可以使用键盘更改选项。我在这个解决方案中遇到的一个问题是，一旦我们选择了一个选项，选项的颜色就会变成白色，这使得无法阅读。我们可以用相同的解决方案通过稍微改变来克服这个问题。 select::-ms-value {background: none; color: #42413D;}

【解决方案2】：

我想我找到了解决办法。也许不是一个非常干净的解决方案，但这个技巧很有效。

我已经在 Firefox、Chrome、Safari、Opera 和 IE 9 中对其进行了测试。适用于所有这些，但不适用于旧版本的 IE（6 和 7）。没有在 IE8 中测试过。如果有人可以在 Mac 上对其进行测试并告诉我这是否可行，那就太好了。

我添加了一个宽度和高度为 0 的输入字段，并在单击选项时将焦点转移到它。在输入字段中使用 display:none 和 visibility:hidden 不起作用。因此，您将在角落的某处隐藏输入字段或使用 z-index 将其移动到容器后面也可能有效（但尚未尝试过）。如果有人有更好的解决方案，请告诉我。

HTML：

 `<select style="background-color:#e0f0f1">
    <option selected="selected">Select</option>
    <option class="" value="one">One</option>
    <option class="" value="two">Two</option>
  </select>
  <input type="text" id="abc" style="width:0; height:0;" />`

jQuery:

$(document).ready(function(){
  $('select option').on('click', function() { $('#abc').focus(); });
});

See this in Fiddle

【讨论】：

输入元素是不必要的。只是模糊$（'select'）。
我在 IE8/WinXP 和 OSX Mountain Lion Safari 6.1.3 中测试了 @user1448031 的解决方案，它在 IE8 中不起作用，但在 Safari 中起作用。此外，它适用于 IE9、10、11。

【解决方案3】：

这实际上是无法做到的，因为它是默认的浏览器行为。您最好的选择可能是将选择框替换为可设置样式的类似功能，例如 jQuery Chosen 插件。

【讨论】：

不幸的是，这似乎效果不佳。这在 Opera 中无效。在 FF 和 IE 中，下拉菜单甚至不打开。
我很害怕...只是将事件更改为“单击”并在 Opera 中进行了测试，这似乎有效。我有一台 Mac，所以没有 IE。
事实上，在没有激活该功能的情况下，它在 Mac/Opera 中会变为白色，直到失去焦点，然后您再次获得背景颜色。
我尝试了您更改的代码。我现在有不同的行为。在 FF、IE 和 Opera 中，单击下拉菜单时不会保持打开状态。在 FF 和 Opera 中，您必须按住，然后选择一个选项。在 IE 中，我什至无法选择一个选项 - 无论我点击什么，它都会默认返回第一个选项。
您也可以尝试“更改”事件，但是如果您单击它但不更改选项，它将不起作用。 fwiw，您还可以使用 $.browser.msie 等测试不同的浏览器 - api.jquery.com/jQuery.browser