Menu
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?
694
It is this value that we have to alter. Setting this property to “none” will do the job. It explicitly tells the browser to not assign any other value to that property, which in turn results in the removal of the default arrow icon.
The solution is to hide the part of the drop-down that contains the default arrow and insert an arrow icon font (or a SVG, if you prefer) similar to the SVG that is used in the other browsers (see the select CSS rule for more details about the inline SVG used).
There are three methods for adding arrows in HTML: entity number. entity name. hexadecimal reference.
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; } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
