删除 IE 上的选择箭头

Question

我有选择元素，我想删除箭头，然后我可以添加其他图标..我可以为 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 回答。

原文由 Muath 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在 IE9 中，可以按照@Spudley 的建议进行 纯黑客攻击。由于您自定义了 div 和选择的高度和宽度，因此您需要更改 div:before css 以匹配您的。

如果它是 IE10 那么使用下面的 css3 是可能的

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

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

原文由 Praveen 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我建议您可以 在这个 GitHub 存储库 中找到我的解决方案。 这也适用于 IE8 和 IE9 ，带有来自图标字体的自定义箭头。

Custom Cross Browser Drop-down 的例子：用你所有的浏览器检查它们以查看跨浏览器功能。

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

适用于 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 ）。解决方案是 隐藏包含默认箭头的 下拉菜单 部分， 并插入类似于其他浏览器中使用的 SVG 的箭头图标字体（或 SVG，如果您愿意）（参见 select CSS 规则有关所使用的内联 SVG 的更多详细信息）。

第一步是设置一个可以识别浏览器的类：这就是我在代码开头使用条件 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 包含箭头的引用（在本例中为右括号）。

我们还将此箭头放在绝对位置，使其尽可能居中（如果您使用不同的图标字体，请记住通过更改 top 和 left 值以及字体大小来适时调整它们）。

 .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 规则中更改它或自己制作一个新的图标字体文件即可。

原文由 Ferie 发布，翻译遵循 CC BY-SA 3.0 许可协议