Removing the IE10 Select Element Arrow

2019-01-16 08:10发布

站内问答 / CSS3
849 5 6

So, with Mozilla and WebKit I have a half-decent solution replacing the arrow on the select box using appearance: none; and having a parent element.

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.

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 ie10plus doesn't actually make it's way to the markup.

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?

5条回答
我命由我不由天
2楼-- · 2019-01-16 08:15

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]-->

查看更多
0人赞 添加讨论(0) 举报
手持菜刀，她持情操
3楼-- · 2019-01-16 08:16

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:

<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.

Also, if you're using jQuery, you might want to do something like this:

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

If you want to check for IE10 or above, copy-paste the getInternetExplorerVersion function from this Microsoft page and then change the if to something like this:

if (getInternetExplorerVersion() >= 10) {
    // whatever implementation you choose
}
查看更多
0人赞 添加讨论(0) 举报
We Are One
4楼-- · 2019-01-16 08:34

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 

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

I removed it 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.

查看更多
0人赞 添加讨论(0) 举报
beautiful°
5楼-- · 2019-01-16 08:37

But!, If we want to add width, we can not do so as:

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;
}
查看更多
0人赞 添加讨论(0) 举报
女痞
6楼-- · 2019-01-16 08:41

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-expand pseudo element:

select::-ms-expand {
    display: none;
}
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)