6

这是我的 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 行为来模拟页面上其他地方的点击？因此，基本上当您单击远离所选选项时，突出显示会消失。

4

3 回答 3

6

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

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

这是一个 dabblet 演示

于 2014-04-05T02:17:16.450 回答
3

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

我已经在 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(); });
});

在小提琴中看到这个

于 2012-11-01T03:55:09.377 回答
0

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

于 2012-11-01T02:38:52.667 回答