如何修改SELECT标签的默认高亮行为在IE和Opera？ [英] How to modify SELECT tag's default highlight behaviour in IE and Opera?

问题描述

这是我的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不会这样做。当选择该选项时，是否有方法或技巧删除该蓝色突出显示，以便始终显示原始背景颜色？

In IE and Opera, when you select an option, it is highlighted with a blue background colour. Firefox, Chrome and Safari don't do this. Is there a way or trick to remove that blue highlight when the option is selected so that the original background colour is always shown?

如果这不可能，添加一个jQuery行为，模拟点击选项后的页面上的其他地方？所以基本上当你点击远离所选的选项，高亮消失。

If that's not possible, is there a way to add a jQuery behaviour that simulates a click elsewhere on the page right after the option is selected? So basically when you click away from the selected option, the highlight disappears.

推荐答案

我想我找到了一个解决方案。也许不是一个非常干净的解决方案，但这个技巧的工作原理。

I think I found a solution to this. Perhaps not a very clean solution but this trick works.

我测试了它在Firefox，Chrome，Safari，Opera和IE 9。不工作在旧版本的IE（6和7）。没有在IE8测试。如果有人可以在Mac上测试它，并让我知道如果这个工作，这将是巨大的。

I've tested it in Firefox, Chrome, Safari, Opera and IE 9. Works on all of them but does not work on older versions of IE (6 and 7). Haven't tested in IE8. If someone can test it on Mac and let me know if this works, that'll be great.

我添加了一个输入字段的宽度和高度为0，到一个选项被点击时。使用display：none和visibility：在输入字段中隐藏不起作用。所以你将隐藏输入字段在角落的某个地方或使用z-index移动它在一个容器后面可能工作（但没有尝试过）。如果有人有更好的解决方案，请告诉我。

I added an input field with width and height as 0 and shifting focus to it when an option is clicked. Using display:none and visibility:hidden in the input field does not work. So you will have hide the input field somewhere in the corner or using z-index to move it behind a container might work too (but haven't tried this). If anyone has a better solution, let me know.

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

在Fiddle中查看此

这篇关于如何修改SELECT标签的默认高亮行为在IE和Opera？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！