Custom Cross Browser Drop-down. Have you ever faced the problem that the HTML tag select has with its default arrow appearance on different browsers? Especially on the older Internet Explorers? Well, if the answer is "yes", or maybe you want a drop-down arrow that appears the same in each browser (including the old ones), here there is an easy trick. For these browser, it is easy to set the same background image for the drop-down in order to have the same arrow. The appearance rules are set to none to reset browsers default ones, if you want to have the same aspect for each arrow, you should keep them in place. The background rules in the examples are set with SVG inline images that represent different arrows. They are positioned 98% from left to keep some margin to the right border (you can easily modify the position as you wish).
Features
- Custom Cross Browser Drop-down
- It's all CSS, no JavaScript needed!
- Drop-down Arrow for Chrome, Firefox, Opera, Internet Explorer 10+
- Drop-down Arrow for Internet Explorer 8 (IE8) and Internet Explorer 9 (IE9) using Icon Font
- The appearance rules are set to none to reset browsers default ones
- You can find all the CSS code and some examples in this repository