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>

See this code in action

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

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

Answer 1

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

我已经在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

Answer 2

在IE11中（不确定以前的版本），您可以使用

从焦点选择元素中删除蓝色背景

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

Here's a dabblet demo

Answer 3

这不能真正完成，因为它是默认的浏览器行为。您最好的选择可能是替换具有可以设置样式的类似功能的选择框，例如jQuery Chosen插件。

如何在IE和Opera中修改SELECT标签的默认突出显示行为？

3 个答案: