我用下面的CSS隐藏了FF、safari、chrome中的下拉箭头,并添加了自己的图片进行自定义。
select
{
-webkit-appearance:none;
-moz-appearance:none;
-o-appearance:none;
appearance:none;
}
对于IE10,我使用了伪元素
select::-ms-expand{
display:none;
}
我不知道如何为IE9应用相同的内容
您已要求为IE8和IE9提供解决方案。
先说IE8。简而言之:不可能。由于IE8和早期版本呈现选择框的方式,您根本无法隐藏下拉箭头。选择框控件在旧IE中是不可能被设计的,并且总是出现在任何其他内容之上。
除了在Javascript中重写整个选择框控件之外,根本没有任何解决方案。
现在是IE9。您可以隐藏下拉箭头。这不是一个标准的东西,但你可以破解它。
您需要从包装器元素开始(例如
这是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以查看其实际操作。
请注意,我使用了< code >红色作为叠加色,以使正在发生的事情更加明显。显然,在正常使用中,你会希望使用白色,这样就不会突出。
您还会注意到,正如我上面所说,这在IE8中不起作用。
显然,这与IE10和其他浏览器的“正确”解决方案不同,后者实际上删除了箭头;我们在这里所做的只是隐藏它。这意味着我们最终会在箭头曾经所在的选择框末尾出现一个烦人的白色补丁。
我们可以做进一步的样式来解决这个问题:例如,如果我们使容器元素具有固定宽度并使用 overflow:hidden
,我们可以摆脱白色补丁,但随后我们遇到了选择框边框被破坏的问题,因此我们必须做进一步的样式修复;这一切都会变得有点混乱。另外,当然,此选项仅在选择框本身是已知的固定宽度时才有效。
现在你知道了:在IE9中有这样做的选项。不过它们并不漂亮,坦白说,可能不值得花这么大力气。但是如果你很绝望,你可以做到。
哦,别忘了使这个CSS代码特定,所以它只在IE9上运行,否则它会在其他浏览器上引起问题。
在IE9的纯CSS中不能删除箭头
然而,你可以这样做。这里是jsFiddle
在此示例中,您在select
上设置了固定的宽度
,并将div
包装为较低的宽度
和溢出:隐藏
以屏蔽/隐藏下拉列表。它完全支持。这实际上确实在所有浏览器中隐藏了箭头。
半铸钢ˌ钢性铸铁(Cast Semi-Steel)
div {
width: 80px;
overflow: hidden;
border: 1px solid black;
}
select {
width: 100px;
border: 0px;
}
在旧版本的IE中实现这一点的唯一方法是包装<code>
在过去,这些元素是不可样式化的,因为它们被认为是操作系统的一部分。现在,你提到的伪元素已经出现,这似乎不再是一个问题了。