If you're looking for a solution, you can check out my custom cross-browser select tag with a unique arrow design on GitHub. This solution works seamlessly on both IE8 and IE9, featuring a custom arrow derived from an icon font.
For a live demonstration of the custom cross-browser drop-down in action, click here and test it across all your browsers to see its compatibility.
Let's dive into the implementation for modern browsers first before tackling the solution for older versions.
Custom Drop-down Arrow for Chrome, Firefox, Opera, Internet Explorer 10+
To achieve a consistent arrow design across these browsers, you can set a common background image for the drop-down arrow.
To do this, reset the default styles for the select tag and apply new background rules as shown below:
select {
-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;
...
}
By maintaining the appearance and outline rules, you ensure a consistent look for the arrow. The background rules utilize SVG inline images for different arrow designs, positioned 98% from the left for proper alignment.
For correct cross-browser functionality, it's crucial to retain the outline rule while other styles can be adjusted as needed.
Custom Drop-down Arrow for Internet Explorer 8 (IE8) and Internet Explorer 9 (IE9) using Icon Font
Dealing with older versions of IE requires a different approach.
Since there's no direct way to hide default arrows in IE8 and IE9, the solution involves hiding the default arrow section in the drop-down and replacing it with an arrow icon font or SVG similar to other browsers.
Firstly, identify these browsers using conditional classes added to the html tag. Then wrap each select element with a div that includes the icon font class:
<div class="selectTagWrapper prefix-icon-arrow-down-fill">
...
</div>
This wrapper acts as a substitute for the select tag.
To resemble a drop-down, the wrapper should have a border as the default select border is hidden. The custom arrow icon font is placed using the :before pseudo class, positioned absolutely to center it.
.ie8 .prefix-icon-arrow-down-fill:before,
.ie9 .prefix-icon-arrow-down-fill:before {
content: ")";
position: absolute;
top: 43%;
left: 93%;
font-size: 6px;
...
}
You can easily customize the arrow design by updating the background image or icon font class as needed.