Cross-Browser Custom Select Tag Arrow

Have you ever faced the problem that the HTML tag select has with its default style and arrow appearance on different browsers? Especially on the older Internet Explorer browsers?

Well, if the answer is “YES”, or maybe you want a drop-down arrow that appear the same in each browsers (including the old ones), here there is an easy trick.

It’s all CSS, no JavaScript needed!

Do you want to see it in action first? Take a look at these examples with all your browsers!

Now, let me explain how this solution works.

Drop-down Arrow for Chrome, Firefox, Opera, Internet Explorer 10+

For these browser, it is easy to set the same background image for the drop-down in order to have the same arrow design.

To do so, first we need to reset the browser’s default styles for the select tag and set new background properties.

select {
	/* you should keep these firsts rules in place to maintain cross-browser behaviour */
	-webkit-appearance: none;
	-moz-appearance: none;
	-o-appearance: none;
	appearance: none;
	background-image: url('<custom_arrow_image_url_here>');
	background-position: 98% center;
	background-repeat: no-repeat;
	outline: none;
	...
}