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

Question

这是我的 HTML：

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

看到这个代码在行动

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

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

Answer 1

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

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

这是一个dabblet演示

Answer 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(); });
});

在小提琴中看到这个