Question

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

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

对于IE10，我使用了伪元素

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

我不知道如何为IE9＆amp; IE8。谁能告诉我如何隐藏IE8中的下拉箭头＆amp; IE9。

Answer 1

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

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

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

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

您需要从选择框周围的包装元素（例如<div>）开始。然后，您可以使用: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;
}

...和see here让jsFiddle看到它的实际效果。

注意，我使用red作为叠加颜色，以明确发生了什么。显然，在正常使用中你需要使用白色，因此它不会脱颖而出。

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

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

我们可以做进一步的样式来解决这个问题：例如，如果我们将容器元素设置为固定宽度并使用overflow:hidden，我们就可以摆脱白色补丁，但是我们选择了边框问题盒子坏了，所以我们必须做进一步的造型修复;它可以变得有点凌乱。当然，只有选择框本身是已知的固定宽度时，此选项才有效。

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

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

Answer 2

您无法删除纯CSS中的箭头 IE9＆lt; 这就是他们为IE10制作::-ms-expand的原因。

但是，你可以这样做。 jsFiddle here

在此示例中，您在width上设置了固定的select，并使用较低的div和width包裹overflow:hidden以屏蔽/隐藏下拉列表。它得到了全力支持。这基本上会隐藏所有浏览器中的箭头。

<强> CSS

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

Answer 3

在旧版本的IE中实现此目的的唯一方法是将<select>包装在稍小的容器中并设置overflow: hidden;这会隐藏右侧的箭头但仍然允许您打开单击下拉列表。它很乱，但它是实现你想要的唯一方法。

过去，这些元素不具有样式，因为它们被视为操作系统的一部分。现在看起来这已成为一个问题，因为你提到的伪元素是可用的。

Answer 4

不确定每个用例，但在我的情况下，为父级设置固定宽度x高度bg pic，这也适用于IE和FF：

<强> HTML

<div id="parent">
  <select>
    ...
  </select>
</div>

<强> CSS

#parent{
  ...
  overflow: hidden;
  width:100px; // for example
}

#parent select{
  ...
  width:120px;
}

jsfiddle

Answer 5

IE9的另一个糟糕但功能性的解决方案：D

Preview

// 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/rules/images/arrow.png');
    right:-2px;
    top:-1px;
    padding-left:2px;
    height:18px;
    width:15px;
    margin:2px;
    background:white;
    z-index:445;
    border: 0;
}

您只需要使用此IE9媒体查询hack

封装此代码

/* IE9 */
    @media screen and (min-width:0\0) {

    }
/* IE9 */

jsFiddle

如何隐藏IE8中的下拉箭头＆amp; IE9？

5 个答案: