删除 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 回答。

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

阅读 366
2 个回答

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

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

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

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

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

我建议您可以 在这个 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 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
logo
Stack Overflow 翻译
子站问答
访问
宣传栏