我想突出显示一个带有背景颜色的选择元素来表明它是强制性的。当用户通过点击打开菜单时，我想删除背景颜色，所以它看起来更好，更具可读性。这在Firefox，Chrome甚至IE6中都可以正常工作，但在IE7上& 8下拉不会在第一次点击（或打开和关闭非常快）时打开，仅在第二次点击时打开。为什么使用onfocus选择在IE中不起作用？
<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>
我该如何解决这个问题？
测试的一点点后，在我看来，如果样式以任何方式修改IE不能打开下拉。
是的，好bug在那里。任何改变选择框（包括任何样式更改，甚至是通过更改父类名称触发的更改）都会使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]-->
换句话说，这是不可能的，我想要的方式，感谢您的描述和IE：焦点解决方法。问题是，我不能在IE中使用这种解决方法，因为我的JavaScript比提供的代码复杂一点。例如。我只突出显示选择是否选择了特定的选项，并且我在onchange上做了同样的事情，我做了onblur。但是，因为我知道这是不可能的，所以我只需更改我的代码并从该函数中排除IE用户。 – 2009-11-20 10:46:17
尝试onfocus="this.style.backgroundColor='#fff';return true;"
的return true;意味着原来的事件处理代码应该继续。另外尝试是否可以用CSS实现相同的结果。
我试过了，没有帮助。你真的尝试过吗？ – 2009-11-19 13:06:21
测试多一点后，在我看来，最好的办法是改变颜色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>
由于导航下拉菜单与键盘没有按” t显示选项，事件似乎并不重要，事件必须是onfocus事件。
看来onmouseout事件只要不再超过实际的<select>即可获取触发器，但也许这可以通过一些jQuery事件处理来解决？
否则，我不知道。 :)
确实像一个非常奇怪的错误。它显然在于在重点期间设置任何不同的设置，例如，选择一个类。
一个想法是只设置选择...选项作为一种解决方法（不适用于其他浏览器，浏览器检查此选项）上的“必需”背景色。
<select>
<option style="background: red none">choose...</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>这将是一个很好的解决方法，我也会尝试这个。 – 2009-11-20 10:40:22
我花了很长一段时间试图解决这个问题，并发现了一个简单的变通为IE8 - 只需使用onmousedown事件而比聚焦。虽然这在所有情况下都不是绝对理想的，但它对于风格的改变非常有效。
这里是我的这个错误对IE8的例子：当我们测试的一点点，但在我看来，如果样式以任何方式修改IE不能打开下拉
是的，看起来如果添加的类改变了下拉表示，它会重新加载，因此不会下降。有趣的是，边界属性是外部的，并且可以在没有此错误发生的情况下进行更改。 – thetoolman 2010-05-19 02:57:19
。我甚至尝试更改父元素的className，以更改背景颜色，但获得相同的结果。 也许