css - 删除 IE10 选择元素箭头

Question

因此，对于 Mozilla 和 WebKit，我有一个半体面的解决方案，使用父元素替换select框上的箭头。appearance: none;

在大多数情况下，我在 IE 中禁用了此功能。对于 IE10，我实际上无法禁用它，因为我的条件注释实际上不起作用。

这是我的标记：

<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)]>    <html class="ie10plus"> <![endif]-->
<!--[if !(IE)]><!--> <html> <!--<![endif]-->

该课程ie10plus实际上并没有成为标记的方式。

我也觉得可能有一种合法的方式来替换 IE 中的箭头。我不反对实际解决问题。appearance: none;但是不起作用。那么我可以在这里做什么？

score 298 · Accepted Answer

298

于 2013-04-10T18:38:46.100 回答

score 2 · Accepted Answer

但是！，如果我们想添加宽度，我们不能这样做：

display:none

所以

select::-ms-expand {
 /* IE 8 */
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 /* IE 5-7 */
 filter: alpha(opacity=0);
 /* Good browsers :) */
 opacity:0;
}

score 1 · Accepted Answer

Internet Explorer 10 不支持条件注释，因此您必须执行其他操作。一种解决方案是使用 JavaScript 嗅探用户代理并自己添加类：

<script>
if (navigator.userAgent.indexOf("MSIE 10.0") !== -1) {
    document.documentElement.className += " ie10";
}
</script>

您可能应该将其添加到中，<head>这样您就不会出现没有样式的内容，但这可能不是问题。

此外，如果您使用的是 jQuery，您可能需要执行以下操作：

if (navigator.userAgent.indexOf("MSIE 10.0") !== -1) {
    $("html").addClass("ie10");
}

如果您想检查 IE10 或更高版本，请从该 Microsoft 页面getInternetExplorerVersion复制粘贴该功能，然后将其更改为如下内容：if

if (getInternetExplorerVersion() >= 10) {
    // whatever implementation you choose
}

score 0 · Accepted Answer

我正在使用Zurb Foundation的 IE 10 和 11 网站上的隐藏下拉箭头出现问题。_form.scss 上有一行

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

我删除了它，下拉箭头开始在所有浏览器上正常显示。谢谢乔纳森在这里的回答。在搜索了很多解决方案后，这对我有所帮助。

score -1 · Accepted Answer

仍然不确定您要完成什么，但这将检测并为 ie10 添加一个类：


css - 删除 IE10 选择元素箭头

5 回答 5

Related

Reference