如何隐藏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中的整个选择框控件。

现在IE9。 您可以隐藏drop-arrow。 这不是一个标准的东西，但你可以破解它。

您需要在选择框的周围使用包装元素（例如<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;
}

...看到这里的jsFiddle看到它的行动。

请注意，我使用red作为叠加颜色，以明确发生了什么。 显然，在正常使用中，你会想要使用白色，所以它不突出。

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

显然，这与IE10和其他浏览器的“正确”解决方案不同，后者实际上删除了箭头; 我们在这里所做的只是隐藏它。 这意味着我们最终会在箭头曾经出现的选择框的末尾添加一个恼人的白色补丁。

我们可以做进一步的样式来解决这个问题：例如，如果我们使容器元素具有固定宽度并且具有overflow:hidden ，我们可以去掉白色补丁，但是然后我们在选择框的边框被破坏时出现问题，所以我们必须做进一步的造型修复; 它可以都有点混乱。 此外，当然，只有选择框本身是已知的固定宽度时，该选项才起作用。

所以你有它：在IE9中有这样做的选项。 尽管如此，他们并不漂亮，坦率地说，这可能不值得。 但如果你绝望，你可以做到。

哦，不要忘了让这个CSS代码具体，所以它只能在IE9上运行，否则会导致其他浏览器出现问题。

---

你不能删除IE9的纯CSS中的箭头<这就是为什么他们为IE10制作::-ms-expand的原因。

但是，你可以做这样的事情。 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; 这会隐藏右侧的箭头，但仍允许您通过单击打开下拉列表。 这很麻烦，但它是实现你想要的唯一方法。

过去，这些元素并没有风格，因为它们被认为是操作系统的一部分。 看起来，现在已经不像您提到的伪元素可用的问题了。

链接地址: http://www.djcxy.com/p/41557.html

上一篇: How to hide drop down arrow in IE8 & IE9?

下一篇: How to remove the arrow from a select element in Firefox