44

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

4

5 回答 5

40

您已要求 IE8 和 IE9 的解决方案。

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

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

现在IE9。您可以隐藏下拉箭头。这不是标准的东西，但你可以破解它。

您需要从<div>选择框周围的包装元素（例如 a ）开始。然后，您可以使用: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 上运行，否则会在其他浏览器上引起问题。

于 2013-10-16T15:58:57.920 回答
20

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

然而，你可以做这样的事情。jsFiddle在这里

在此示例中，您设置了一个固定width的 on ，并用一个较低的和select包裹 a以屏蔽/隐藏下拉菜单。它得到了全力支持。这实际上确实隐藏了所有浏览器中的箭头。divwidthoverflow:hidden

CSS

div {
    width: 80px;
    overflow: hidden;
    border: 1px solid black;
}
select {
    width: 100px;
    border: 0px;
}
于 2013-10-16T15:33:50.420 回答
2

在旧版本的 IE 中完成此操作的唯一方法是将其包装<select>在一个稍小的容器中并设置overflow: hidden;这将隐藏右侧的箭头，但仍允许您通过单击它来打开下拉菜单。这很混乱，但这是完成你想要的事情的唯一方法。

在过去，这些元素没有样式化，因为它们被认为是操作系统的一部分。既然您提到的伪元素可用，这似乎不再是一个问题。

于 2013-10-16T15:55:51.547 回答
2

不确定每个用例，但在我的情况下，为父级设置了固定宽度 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

于 2014-11-13T09:28:31.467 回答
1

IE9 的另一个糟糕但功能上的解决方案：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/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

于 2016-03-21T17:24:15.767 回答