如何隐藏 IE8 和 IE9 中的下拉箭头？

我使用下面的 CSS 隐藏 FF、safari、chrome 中的下拉箭头，并添加我自己的图像进行自定义。

select 
{
  -webkit-appearance:none;
  -moz-appearance:none;
  -o-appearance:none;
   appearance:none; 
}

对于IE10，我使用了伪元素

select::-ms-expand{
  display:none;
}

我不知道如何将其应用于 IE9 和 IE8。谁能告诉我如何隐藏 IE8 和 IE9 中的下拉箭头。

您要求提供适用于 IE8 和 IE9 的解决方案。

我们先从IE8开始。简短的回答：这是不可能的。由于 IE8 和更早版本呈现选择框的方式，您根本无法隐藏下拉箭头。选择框控件无法在旧版 IE 中设置样式，并且始终显示在任何其他内容之上。

除了用 Javascript 重写整个选择框控件之外，根本没有任何解决方案。

Now IE9. You can隐藏下拉箭头。这不是一个标准的东西，但你可以破解它。

您需要从包装元素开始（例如<div>）围绕您的选择框。然后你可以用:before选择器将额外的内容放置在下拉箭头的顶部，从而有效地将其隐藏。

这是 CSS：

div {
    position:relative;
    display:inline-block;
    z-index:0
}
div select {
    z-index:1;
}

div:before {
    display:block;
    position:absolute;
    content:'';
    right:0px;
    top:0px;
    height:1em;
    width:1em;
    margin:2px;
    background:red;
    z-index:5;
}

...and see here http://jsfiddle.net/SRGLu/让 jsFiddle 看到它的实际效果。

注意，我用过red作为覆盖颜色，使发生的事情一目了然。显然，在正常使用中，您会希望使用白色，这样它就不会引人注目。

您还会注意到，正如我上面所说，这在 IE8 中不起作用。

显然，这与 IE10 和其他浏览器的“正确”解决方案不同，后者实际上删除了箭头；我们在这里所做的只是隐藏它。这意味着我们最终会在选择框末端（箭头所在的位置）出现令人讨厌的白色斑点。

我们可以做进一步的样式来解决这个问题：例如，如果我们将容器元素设置为固定宽度并使用overflow:hidden，我们可以去掉白色补丁，但随后我们会遇到选择框边框被破坏的问题，因此我们必须进行进一步的样式修复；这一切可能会变得有点混乱。另外，当然，只有当选择框本身是已知的固定宽度时，此选项才有效。

现在您已经知道了：在 IE9 中可以选择执行此操作。但它们并不漂亮，而且坦率地说可能不值得付出努力。但如果你绝望的话，你可以做到。

哦，别忘了让这个 CSS 代码变得特定，这样它只能在 IE9 上运行，否则会在其他浏览器上引起问题。