Removing the IE10 Select Element Arrow

Css Internet Explorer-10 Conditional Statements

Css Problem Overview

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?

Css Solutions

Solution 1 - Css

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

Solution 2 - Css

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

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

Solution 3 - Css

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
}

Solution 4 - Css

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.

Solution 5 - Css

still not sure what you are trying to accomplish, but this will detect and add a class for ie10:


Content Type	Original Author	Original Content on Stackoverflow
Question	Parris	View Question on Stackoverflow
Solution 1 - Css	Sampson	View Answer on Stackoverflow
Solution 2 - Css	Sergey	View Answer on Stackoverflow
Solution 3 - Css	Evan Hahn	View Answer on Stackoverflow
Solution 4 - Css	ranjeesh	View Answer on Stackoverflow
Solution 5 - Css	albert	View Answer on Stackoverflow