如何隐藏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的解决scheme。
我们从IE8开始吧。 简答：这是不可能的。 由于IE8和之前渲染select框的方式，您不能隐藏下拉箭头。 select框控件是不可能的风格，在旧的IE中，总是出现在任何其他内容上方。
没有任何解决scheme，除了在JavaScript中重写整个select框控件。
现在IE9。 您可以隐藏下拉箭头。 这不是一个标准的事情，但你可以破解它。
你需要围绕你的select框开始一个包装元素（例如<div> ）。 然后，您可以使用以下选项来设置样式:beforeselect器: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; }
… 看到这里的jsFiddle看到它的行动。
请注意，我已经使用red作为叠加颜色，以明确发生了什么事情。 显然在正常使用中，你会想要使用白色，所以它不突出。
你也会注意到，正如我上面所述，这不适用于IE8。
显然，这与IE10和其他浏览器的“正确”解决scheme不一样，它们实际上删除了箭头; 我们在这里所做的就是隐藏它。 这意味着我们在箭头所在的select框的末尾会出现一个恼人的白色补丁。
我们可以做一些进一步的devise来解决这个问题：例如，如果我们使容器元素具有固定的宽度和overflow:hidden ，我们可以去掉白色的补丁，但是我们的select框的边框被破坏了，我们必须做进一步的造型修复; 它可以都有点混乱。 另外当然，这个选项只有在select框本身是已知的固定宽度时才起作用。
所以你有它：在IE9中有这样做的选项。 尽pipe如此，他们并不漂亮，坦率地说可能不值得。 但如果你绝望，你可以做到。
哦，不要忘记这个CSS代码是特定的，所以它只能在IE9上运行，否则会导致其他浏览器出现问题。
你不能删除IE9的纯CSS中的箭头<这就是为什么他们作出::-ms-expand IE10。
但是，你可以做这样的事情。 jsFiddle在这里
在这个例子中，你select一个固定的width ，并包装一个width较低和overflow:hidden的div overflow:hidden以掩盖/隐藏下拉菜单。 它有充分的支持。 这基本上隐藏了所有浏览器中的箭头。
CSS
div { width: 80px; overflow: hidden; border: 1px solid black; } select { width: 100px; border: 0px; }
在老版本的IE中完成这个的唯一方法是将<select>包装在一个稍小的容器中，并设置overflow: hidden; 这将隐藏在右侧的箭头，但仍然允许您通过单击打开下拉列表。 这很麻烦，但它是唯一的方法来实现你想要的。
在过去，这些元素是不可风格的，因为它们被认为是操作系统的一部分。 现在看来，现在已经不像你提到的伪元素可用了。
不知道每个用例，但在我的情况下，为父母设置固定宽度x高度bg图片，这也适用于IE和FF：
HTML
<div id="parent"> <select> ... </select> </div>
CSS
#parent{ ... overflow: hidden; width:100px; // for example } #parent select{ ... width:120px; }
的jsfiddle
IE9的另一个不好但function性的解决scheme：D
预习
// CSS
div { position:relative; display:inline-block; border:solid black 1px; z-index:0 } div select { z-index:1; border:none; width:200px; } div:before { display:block; position:absolute; content:url('http://help.eclipse.org/mars/topic/org.eclipse.stardust.docs.enduser/html/handbooks/execution-clients/ruleshttp://img.dovov.comarrow.png'); right:-2px; top:-1px; padding-left:2px; height:18px; width:15px; margin:2px; background:white; z-index:445; border: 0; }
所有你需要的是用这个IE9媒体查询破解封装这个代码
/* IE9 */ @media screen and (min-width:0\0) { } /* IE9 */
的jsfiddle
