Question

我想要突出显示带有背景颜色的选择元素，这是必须的。当用户通过单击打开菜单时，我想删除背景颜色，因此它看起来更好，更具可读性。这在Firefox，Chrome甚至IE6中运行得很好，但是在IE7＆amp; 8下拉时第一次点击不打开（或者打开和关闭非常快），仅在第二次点击时打开。

<select 
    style="background-color: #BDE5F8"
    onfocus="this.style.backgroundColor='#fff'"
    onblur="this.style.backgroundColor='#BDE5F8'">
    <option>choose...</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

我该如何解决这个问题？

Answer 1

经过一些测试后，在我看来，如果以任何方式修改了样式，IE都不会打开下拉列表。

是的，那里有好虫。任何更改选择框的内容（包括任何样式更改，甚至是通过更改父类名称触发的更改）都会使IE为其重新创建操作系统小部件，这会产生关闭它的副作用。因此下拉列表打开，但在渲染之前立即关闭。如果你在后台更改功能上设置超时，你可以看到它在之后发生。

在聚焦之前，您首先需要的是一个事件，因此您可以在打开之前更改样式，使下拉菜单关闭。幸运的是，there is one！但它只是IE浏览器。对于其他浏览器（包括IE8），最好坚持使用简单的CSS :focus选择器：

<style>
    select { background-color: #BDE5F8; }
    select:focus, select.focus { background-color: white; }
</style>
<select>
        <option>choose...</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
</select>

<!--[if lt IE 8]><script>
    // Fix lack of :focus selector for select elements in IE7-
    //
    var selects= document.getElementsByTagName('select');
    for (var i= selects.length; i-- >0;) {
        var select= selects[i];
        select.onfocusin= function() {
            this.className= 'focus';
        };
        select.onfocusout= function() {
            this.className= '';
        };
    }

    // Or, the same expressed in jQuery, since you mentioned using it
    //
    $('select').bind('focusin', function() {
        $(this).addClass('focus');
    }).bind('focusout', function() {
        $(this).removeClass('focus');
    });
</script><![endif]-->

Answer 2

经过多次测试后，在我看来，最好的方法是更改颜色onmouseover，然后将其更改回onblur，例如

<select 
    onmouseover="this.style.backgroundColor='#fff';"
    onblur="this.style.backgroundColor='#bde5f7'">
    <option>choose...</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

由于使用键盘导航下拉列表并未显示选项，因此事件必须是onfocus事件似乎并不重要。

一旦你不再超过实际的<select>，onmouseout事件就会获得触发器，但是这可以通过一些jQuery事件处理来解决吗？

否则，我不知道。：）

Answer 3

看起来确实是一个非常奇怪的错误。它显然取决于在焦点期间设置任何不同的设置，例如，选择一个类。

一个想法是仅在选择... 选项上设置“必需的”背景颜色作为解决方法（这在其他浏览器上不起作用，请对此进行浏览器检查））。

<select>
        <option style="background: red none">choose...</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
</select>

Answer 4

我花了很长时间试图解决这个问题，并为IE8找到了一个简单的解决方法 - 只使用onmousedown而不是onfocus。虽然这在所有情况下都不是绝对理想的，但它确实适用于风格变化。

Answer 5

这是ie8的这个bug的例子：

http://jsfiddle.net/axQTJ/1/

Answer 6

尝试onfocus="this.style.backgroundColor='#fff';return true;"

return true;表示原始事件处理代码应该继续。还可以尝试使用CSS实现相同的结果。

为什么使用onfocus选择在IE中不起作用？

6 个答案: