删除 IE10 选择元素箭头
Posted
技术标签:
【中文标题】删除 IE10 选择元素箭头【英文标题】：Removing the IE10 Select Element Arrow 【发布时间】：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 元素添加一个类
【参考方案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 添加一个类：<!--[if !IE]><!--<script>
if (/*@cc_on!@*/false)
document.documentElement.className+=' ie10plus';
</script>!--<![endif]-->
【讨论】：
不知道为什么这被否决了...我确实认为 johnathon sampson 的答案更优雅，应该选择。但否决了？弱酱。 这被否决了，因为它试图强制 IE10 识别条件 cmets 是一种黑客行为。接受答案的“标准方法”是使用这些供应商伪元素：msdn.microsoft.com/en-us/library/windows/apps/hh767361.aspx 1.根据 Evan 的回答中的链接，您的技术在 IE 标准模式下被破坏（在 IE10 中删除了 HTML 条件，在 IE11 中删除了 JS 条件——因为它们是非标准的）。 2. 供应商前缀是处理浏览器特定功能的标准方式。 感谢您的历史课。我很清楚，而且这种技术仍然有效以上是关于删除 IE10 选择元素箭头的主要内容，如果未能解决你的问题，请参考以下文章