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

Question

我使用下面的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中的下拉箭头.

Answer 1

您已经要求为IE8和IE9提供解决方案.

让我们从IE8开始吧.简短的回答:这是不可能的.由于IE8和早期渲染选择框的方式,您根本无法隐藏下拉箭头.选择框控件无法在旧IE中设置样式,并且始终位于任何其他内容之上.

除了在Javascript中重写整个选择框控件之外,根本没有任何解决方案.

现在IE9.您可以隐藏掉落箭头.这不是标准的事情,但你可以破解它.

您需要从<div>选择框周围的包装元素(例如a )开始.然后,您可以使用:before选择器设置此样式,以在drop-arrow的顶部放置一些额外的内容,从而有效地隐藏它.

这是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;
}

...并在这里看到j​​sFiddle看到它在行动.

请注意,我已经将其red用作叠加颜色,以明确发生了什么.显然,在正常使用中,你想要使用白色,这样它就不会脱颖而出.

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

显然,这是不一样的,作为IE10和其他浏览器的"正确"的解决方案,这实际上消除箭杆; 我们在这里所做的就是隐藏它.这意味着我们最终的选择框,箭头曾经是结束一个恼人的白斑.

我们可以做进一步的造型来解决这个问题:例如,如果我们把容器元素一个固定的宽度,并与overflow:hidden中,我们可以摆脱白斑的,但我们有我们的选择框的边界被打破的问题,所以我们要做进一步的造型修复; 它可以变得有点凌乱.另外,当然,如果选择框本身是一个已知的固定宽度此选项才有效.

所以你有它:在IE9中有这样做的选项.虽然他们并不漂亮,但坦率地说可能不值得.但如果你绝望,你可以做到.

哦,别忘了让这个CSS代码的特性,因此它只能在IE9上运行,否则会造成对其他浏览器的问题.

Answer 2

你不能删除纯CSS中IE9的箭头<这就是他们::-ms-expand为IE10 做的原因.

但是,你可以这样做.jsFiddle在这里

在本例中,设定一个固定的width上select,并包裹一个div具有较低width和overflow:hidden以掩盖/隐藏下拉.它得到了全力支持.这实质上确实隐藏在所有浏览器上的箭头.

CSS

div {
    width: 80px;
    overflow: hidden;
    border: 1px solid black;
}
select {
    width: 100px;
    border: 0px;
}