如何在IE和Opera中修改SELECT标记的默认突出显示行为? [英] 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的输入字段，并在单击选项时将焦点移至该输入字段.在输入字段中使用显示:无和可见性:不起作用.因此，您可以将输入字段隐藏在角落的某个位置，或者使用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(); });
});

在小提琴中查看

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