删除 IE10 选择元素箭头答案

【问题标题】：Removing the IE10 Select Element Arrow删除 IE10 选择元素箭头
【发布时间】：2013-02-27 10:02:28
【问题描述】：

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

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

这是我的标记：

<!--[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; 但是不起作用。那我可以在这里做什么？

【问题讨论】：

什么？你想为 ie10 设置外观：无，就像你为壁虎和火狐设计样式一样？如果在您的样式表中设置了 ie10，它应该会获得该样式。您可以使用条件来定位其他 ie，并为真正的浏览器提供主样式表
@albert 外观：没有任何作品。但它不会删除选择框的箭头。
啊。 mb。那么你的问题是什么？ ie10如何检测和分类？
@albert 我想我在问 2 个问题。我们可以删除选择箭头吗？如果不能，我们如何为 ie10 添加条件。
idk 关于删除它，因为 ie10 不支持 appearance 但我在下面回答了如何定位 ie10 并向 html 元素添加一个类

标签： css internet-explorer-10 conditional-statements

【解决方案1】：

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

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

【讨论】：

@Parris 谢谢。我希望您在实施此解决方案时比其他流行的方法更自在。
@JonathanSampson 我实际上正在寻找这样的改变。
这太棒了，谢谢 :D 不幸的是它在 IE9 中不起作用 :(
@JonathanSampson 我想隐藏 ie-8 和 ie-9 中的默认下拉箭头我不知道在 ie-8 和 ie-9 中该怎么做，你能不能给我一个解决方案
@user2681579 对于 IE8 或 IE9，您无法删除它；您需要用脚本替代替换本机元素，或者找到某种方法来屏蔽选择元素的该部分。在我看来，最好只是更换它。

【解决方案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;
}

【讨论】：

【解决方案3】：

Internet Explorer 10 doesn't support conditional comments，所以你必须做点别的。一种解决方案是使用 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 或更高版本，请复制粘贴 getInternetExplorerVersion 函数 from this Microsoft page，然后将 if 更改为如下内容：

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

【讨论】：

【解决方案4】：

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

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

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

【讨论】：

这种事情请使用 cmets，而不是额外的答案。
Zurb 基金会的意外行为把我带到了这里，谢谢你的回答，或者评论！ ;)

【解决方案5】：

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


【讨论】：

不知道为什么这被否决了...我确实认为 johnathon sampson 的答案更优雅，应该选择。但否决了？弱酱。
这被否决了，因为它试图强制 IE10 识别条件 cmets 是一种黑客行为。接受答案的“标准方法”是使用这些供应商伪元素：msdn.microsoft.com/en-us/library/windows/apps/hh767361.aspx
1.根据 Evan 的回答中的链接，您的技术在 IE 标准模式下被破坏（在 IE10 中删除了 HTML 条件，在 IE11 中删除了 JS 条件——因为它们是非标准的）。 2. 供应商前缀是处理浏览器特定功能的标准方式。
感谢您的历史课。我很清楚，而且这种技术仍然有效