75

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?

Sampson
  • 265,109
  • 74
  • 539
  • 565
Parris
  • 17,833
  • 17
  • 90
  • 133
  • what? you want to set appearance:none for ie10, like you are styling for gecko and firefox? ie10 should be getting that style if its set in your style sheet. you can target the other ies with conditionals, and serve up the main stylesheet for the real browsers – albert Mar 12 '13 at 03:18
  • @albert appearance: none sort of works. It doesn't remove the arrow for the select box though. – Parris Mar 12 '13 at 03:57
  • ah. mb. so what is your question? how to detect and a class to ie10? – albert Mar 12 '13 at 04:03
  • @albert i guess I was asking 2 questions. Can we remove the select arrow some how and if not how can we add in a conditional for ie10. – Parris Mar 12 '13 at 17:22
  • idk about removing it as ie10 doesn't support appearance but i answered below how to target ie10 and add a class to the html element – albert Mar 12 '13 at 18:35
  • @Parris I am facing a problem,I want to hide the default drop down arrow in ie-8 & ie-9.From your question i found that you had managed in ie-8 & ie-9,can you please provide me a solution – user2681579 Oct 16 '13 at 13:04
  • @user2681579 The technique I used was to place a custom drop down visual under a transparent select box. When you click on what appears to be a custom select box you actually get the standard select expanded. This allows the select box to work perfectly in all platforms. We've been using this technique in production code for a while now with no problems. – Parris Oct 16 '13 at 20:26
  • BTW, it doesn't work for Firefox. That's how you do it: http://stackoverflow.com/a/18317228/1411163 – João Cunha Nov 26 '13 at 10:13

5 Answers5

298

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;
}
Sampson
  • 265,109
  • 74
  • 539
  • 565
  • 1
    @Parris Thanks. I hope you feel more comfortable implementing this solution than other popular approaches. – Sampson Apr 11 '13 at 01:42
  • @JonathanSampson i was actually looking for a change like this. – Parris Apr 11 '13 at 01:56
  • 2
    This is awesome thanks :D unfortunately it doesnt work in IE9 though :( – Pawcu Oct 01 '13 at 12:31
  • @JonathanSampson I want to hide the default drop down arrow in ie-8 & ie-9 i don't know how to do in ie-8 & ie-9,can you please provide me a solution – user2681579 Oct 16 '13 at 13:07
  • @user2681579 You cannot remove that for IE8 or IE9; you would need to replace the native element with a scripted alternative, or find some way to mask that portion of the select element. Better to just replace it, in my opinion. – Sampson Oct 16 '13 at 21:21
2

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;
}
Sergey
  • 21
  • 1
1

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
}
Evan Hahn
  • 12,147
  • 9
  • 41
  • 59
0

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.

ranjeesh
  • 29
  • 2
-1

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

albert
  • 8,112
  • 3
  • 47
  • 63
  • not sure why this got downvoted...i do think johnathon sampson's answer is more elegant, and should be chosen. but down voted? weak.sauce. – albert Apr 11 '13 at 02:10
  • This is downvoted because it's a hack to try and force IE10 to recognize conditional comments. The "standard approach" of the accepted answer is to use these vendor pseudo-elements: http://msdn.microsoft.com/en-us/library/windows/apps/hh767361.aspx – Benxamin Jun 13 '13 at 17:39
  • 1. Your technique is broken in IE standards mode as per link in Evan's answer (HTML conditionals removed in IE10 and JS conditionals removed in IE11 -- because they were non-standard). 2. Vendor prefixes are the standard way to handle browser specific features. – robocat Oct 13 '14 at 02:37
  • thanks for the history lesson. i'm well aware, and that technique still works – albert Oct 13 '14 at 14:24