卸下IE10选择元素箭头

75

因此，对于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;但是不起作用。那我该怎么办？

css internet-explorer-10 conditional-statements

— 帕里斯
source

什么？您想设置外观：对于ie10来说没有，就像您要为壁虎和Firefox造型一样？如果样式表中已设置ie10，则应该获取该样式。你可以针对其他IES用条件，和服务于主要样式为真正的浏览器

— 艾伯特

@albert外观：没有任何作品。但是，它不会删除选择框的箭头。

— 帕里斯

啊。mb。那你有什么问题如何检测和到ie10类？

— 艾伯特

@albert我猜我在问两个问题。我们是否可以删除选择箭头，如何以及是否可以为ie10添加条件。

— 帕里斯

关于将其作为ie10删除的idk不支持<code> appearance </ code>，但是我在下面回答了如何定位ie10并将类添加到<code> html </ code>元素的问题

— 阿尔伯特，

298

避免使用浏览器嗅探和条件注释（Internet Explorer 10中不支持），而采取更标准的方法。对于这个特定问题，您应该针对::-ms-expand伪元素：

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

— 桑普森
source

1

@Parris谢谢。我希望您比其他流行的方法更舒适地实施此解决方案。

— 桑普森

@JonathanSampson我实际上正在寻找这样的变化。

— 帕里斯

2

真棒，谢谢：D不幸的是，它在IE9中不起作用:(

— Pawcu

@JonathanSampson我想在ie-8＆ie-9中隐藏默认的下拉箭头，我不知道在ie-8＆ie-9中如何做，请您提供一个解决方案

— user2681579 2013年

@ user2681579您不能删除IE8或IE9的文件；只能将其删除。您将需要用脚本替代来替换本机元素，或者找到某种方法来掩盖select元素的这一部分。我认为最好将其替换。

— 桑普森

2

但是！，如果我们要增加宽度，则不能这样做：

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;
}

— 谢尔盖
source

1

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
}

— 埃文·哈恩（Evan Hahn）
source

0

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

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

我将其删除，并且所有浏览器中的下拉箭头均开始正常显示。谢谢乔纳森在这里的回答。在寻找了很多解决方案之后，这对我有所帮助。

— 兰吉什
source

1

请对此类事情使用注释，而不是其他答案。

— 本·布莱克

Zurb Foundation的意外行为将我带到这里，感谢您的回答或评论！;）

— Patrick Jones

-1

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


— 阿尔伯特
source

不知道为什么这会被否决...我确实认为johnathon sampson的答案更优雅，应该选择。但是被否决了？弱酱

— 艾伯特

这是被否决的，因为试图强迫IE10识别条件注释是一种黑客行为。接受的答案的“标准方法”是使用这些供应商的伪元素：msdn.microsoft.com/en-us/library/windows/apps/hh767361.aspx

— Benxamin 2013年

1.按照Evan的答案中的链接，您的技术在IE标准模式下被破坏（由于IE10中删除了HTML条件，而IE11中删除了JS条件-因为它们是非标准的）。2.供应商前缀是处理浏览器特定功能的标准方法。

— robocat 2014年

感谢您的历史课。我很清楚，该技术仍然有效

— 阿尔伯特2014年