CODEWITHSUNDEEP
cssinternet-explorer-10conditional-statements
Parris
Parris

Reputation: 18456

Removing the IE10 Select Element Arrow

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?

Upvotes: 75

Views: 77906

Answers (5)

Sergey
Sergey

Reputation: 21

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

Upvotes: 2

ranjeesh
ranjeesh

Reputation: 29

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.

Upvotes: 0

Sampson
Sampson

Reputation: 268462

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

Upvotes: 297

albert
albert

Reputation: 8153

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

Upvotes: -1

Evan Hahn
Evan Hahn

Reputation: 12737

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
}

Upvotes: 1

Related Questions