移除 IE 上的选择箭头

我有选择元素，我想删除箭头，然后我可以添加其他图标。 我可以在 Firefox Safari 和 Chrome 上这样做, 但是这个在 IE9上不起作用。

.styled-select select
{
border: 0 !important;  /*Removes border*/
-webkit-appearance: none;  /*Removes default chrome and safari style*/
-moz-appearance: none;  /*Removes default style Firefox*/
background: url('select_icon.png')  no-repeat;
background-position: 179px 7px;
text-indent: 0.01px;
text-overflow: "";
color: #FCAF17;
width:200px;
}

请看 IE9台的 小提琴。 我只需要移除 ie9中的箭头 请 JSFIDDLE 回答。

173596 次浏览
小开
最佳答案

在 IE9中，按照@Spudley 的建议，使用 纯粹是黑客行为是可能的。由于您已经定制了 div 的高度和宽度并进行了选择，因此需要更改 div:before css 以匹配您的高度和宽度。

在情况下，如果它是 IE10然后使用低于 css3是可能的

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

但是，如果您对 jQuery 插件感兴趣，请尝试 Chosen.js或者您可以在 js 中创建自己的插件。

小开

我建议我的解决方案，你可以找到 在这个 GitHub 回收站。 这种方法也适用于 IE8和 IE9 ，使用来自图标字体的自定义箭头。

自定义跨浏览器下拉 的实例: 在所有浏览器中检查它们，以查看跨浏览器特性。

无论如何，让我们从现代的浏览器开始，然后我们将看到老的浏览器的解决方案。

Chrome，Firefox，Opera，Internet Explorer 10的下拉箭头

对于这些浏览器，很容易 为下拉菜单设置相同的背景图像为了有相同的箭头。

为此，您必须为 select标记重置浏览器的默认样式，并设置新的背景规则(如前所述)。

select {
/* you should keep these firsts rules in place to maintain cross-browser behaviour */
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
background-image: url('<custom_arrow_image_url_here>');
background-position: 98% center;
background-repeat: no-repeat;
outline: none;
...
}

将 appearance规则设置为无以重置浏览器默认规则，如果希望每个箭头具有相同的方面，则应将它们保持在适当的位置。

示例中的 background规则是用表示不同箭头的 SVG 内联图像设置的。他们的位置是从左边98% ，以保持一些边缘到右边界(你可以很容易地修改的立场，因为你希望)。

为了维护正确的跨浏览器行为，必须保留的唯一其他规则是 outline。此规则重置单击元素时(在某些浏览器中)出现的默认边框。如果需要，所有其他规则都可以很容易地修改。

使用图标字体的 Internet Explorer 8(IE8)和 Internet Explorer 9(IE9)下拉箭头

这是最难的部分，或许不是。

没有标准规则来隐藏这些浏览器的默认箭头(如 IE10 + 的 select::-ms-expand)。解决方案是 隐藏 < em > 下拉列表 中包含默认箭头的部分并插入一个箭头图标字体(或者 SVG，如果您愿意) ，类似于其他浏览器中使用的 SVG (有关使用的内联 SVG 的更多细节，请参见 select CSS 规则)。

第一步是设置一个可以识别浏览器的类: 这就是为什么我在代码开头使用条件 IE IF 的原因。这些 IF 用于将特定的类附加到 html标记以识别旧的 IE 浏览器。

在此之后，HTML 中的每个 select都必须由 div(或任何可以包装元素的标记)包装。在这个包装器中，只需添加包含图标字体的类。

<div class="selectTagWrapper prefix-icon-arrow-down-fill">
...
</div>

简单地说，这个包装器用于模拟 select标记。

要像下拉列表那样操作，包装器必须有一个边框，因为我们隐藏了来自 select的边框。

注意，我们不能使用 select边框，因为我们必须隐藏默认的箭头，这个箭头比包装器长25% 。因此，它的右边界不应该是可见的，因为我们通过应用于 select本身的 overflow: hidden规则隐藏了这25% 。

自定义箭头图标-字体放在伪类 :before中，其中规则 content包含箭头的引用(在本例中是右括号)。

我们还将这个箭头放置在一个绝对位置，以尽可能使其居中(如果您使用不同的图标字体，请记住通过改变顶部和左侧值以及字体大小来适当地调整它们)。

.ie8 .prefix-icon-arrow-down-fill:before,
.ie9 .prefix-icon-arrow-down-fill:before {
content: ")";
position: absolute;
top: 43%;
left: 93%;
font-size: 6px;
...
}

您可以很容易地创建和替换背景箭头或图标字体箭头，每一个您想要简单地改变它在 background-image规则或自己创建一个新的图标字体文件。

小开

如果你想使用类和伪类:

.simple-control是你的 css 类

:disabled是伪类

select.simple-control:disabled {
/*For FireFox*/
-webkit-appearance: none;
/*For Chrome*/
-moz-appearance: none;
}
    

/*For IE10+*/
select:disabled.simple-control::-ms-expand {
display: none;
}

提交答案