CSS 删除 IE10 选择元素箭头
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15351949/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Removing the IE10 Select Element Arrow
提问by Parris
So, with Mozilla and WebKit I have a half-decent solution replacing the arrow on the selectbox using appearance: none;and having a parent element.
因此，使用 Mozilla 和 WebKit，我有一个不错的解决方案，select使用appearance: none;并具有父元素来替换框上的箭头。
In IE for the most part I disabled this feature. For IE10 I can't actually disable it since my conditional comments don't actually work.
在 IE 中我禁用了这个功能。对于 IE10，我实际上无法禁用它，因为我的条件注释实际上不起作用。
Here is my markup:
这是我的标记：
<!--[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]-->
The class ie10plusdoesn't actually make it's way to the markup.
该类ie10plus实际上并没有成为标记的方式。
I also feel like there might be a legitimate way to replace the arrow in IE. I am not opposed to actually fixing the problem. appearance: none;however does not work. So what can I do here?
我也觉得可能有一种合法的方法来替换 IE 中的箭头。我不反对实际解决问题。appearance: none;但是不起作用。那么我可以在这里做什么？
回答by Sampson
Avoid browser-sniffing and conditional comments (which aren't supported as of Internet Explorer 10), and instead take a more standard approach. With this particular issue you should be targeting the ::-ms-expandpseudo element:
避免浏览器嗅探和条件注释（从 Internet Explorer 10 开始不受支持），而是采用更标准的方法。对于这个特定问题，您应该针对::-ms-expand伪元素：
select::-ms-expand {
display: none;
}
回答by Sergey
But!, If we want to add width, we can not do so as:
但是！，如果我们想增加宽度，我们不能这样做：
display:none
display:none
So
所以
select::-ms-expand {
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
/* IE 5-7 */
filter: alpha(opacity=0);
/* Good browsers :) */
opacity:0;
}
回答by Evan Hahn
Internet Explorer 10 doesn't support conditional comments, so you'll have to do something else. One solution is to sniff the user agent with JavaScript and add the class yourself:
Internet Explorer 10 不支持条件注释，因此您必须执行其他操作。一种解决方案是使用 JavaScript 嗅探用户代理并自己添加类：
<script>
if (navigator.userAgent.indexOf("MSIE 10.0") !== -1) {
document.documentElement.className += " ie10";
}
</script>
You should probably add this in the <head>so that you don't have a flash of unstyled content, but that might not be a problem.
您可能应该将它添加到 中，<head>这样您就不会出现无样式的内容，但这可能不是问题。
Also, if you're using jQuery, you might want to do something like this:
此外，如果您使用 jQuery，您可能想要执行以下操作：
if (navigator.userAgent.indexOf("MSIE 10.0") !== -1) {
$("html").addClass("ie10");
}
If you want to check for IE10 or above, copy-paste the getInternetExplorerVersionfunction from this Microsoft pageand then change the ifto something like this:
如果要检查 IE10 或更高版本，请从此 Microsoft 页面复制粘贴该getInternetExplorerVersion功能，然后将其更改为如下所示：if
if (getInternetExplorerVersion() >= 10) {
// whatever implementation you choose
}
回答by ranjeesh
I had an issue with a hidden drop down arrow on the site on IE 10 and 11 that I am working which uses Zurb Foundation. There was a line on the _form.scss which had
我在使用Zurb Foundation 的IE 10 和 11 网站上的隐藏下拉箭头出现问题。_form.scss 上有一行
select::-ms-expand {
display: none;
}
I removedit and the dropdown arrow started showing normally on all broswers. Thank You Jonathan for your answer here. This helped me after searching a lot for a solution.
我删除了它，下拉箭头开始在所有浏览器上正常显示。感谢乔纳森在这里的回答。在搜索了很多解决方案后，这对我有所帮助。
回答by albert
still not sure what you are trying to accomplish, but this will detect and add a class for ie10:<!--[if !IE]><!--<script>
if (/*@cc_on!@*/false) {
document.documentElement.className+=' ie10plus';
}
</script>!--<![endif]-->
仍然不确定您要完成什么，但这将检测并为 ie10 添加一个类：<!--[if !IE]><!--<script>
if (/*@cc_on!@*/false) {
document.documentElement.className+=' ie10plus';
}
</script>!--<![endif]-->
