How to Remove the Select Arrow in Internet Explorer 9?

Removing Select Arrow on IE

In the pursuit of customizing select elements by removing their default arrows, the aforementioned CSS seems to fall short when it comes to Internet Explorer 9 (IE9). Here's how to rectify this issue:

Solution:

• IE9 Hack: As suggested by @Spudley, a CSS hack can be applied to IE9. Adjust the div:before CSS to align with the customized height and width of the div and select elements.
• IE10 CSS3: For IE10 and above, the following CSS3 code can be employed:

select::-ms-expand {
    display: none;
}

Alternative Options:

• jQuery Plugin (Chosen.js): Leveraging a jQuery plugin like Chosen.js offers a user-friendly solution.
• Custom JavaScript: Creating a custom JavaScript script can also effectively remove the select arrow.

The above is the detailed content of How to Remove the Select Arrow in Internet Explorer 9?. For more information, please follow other related articles on the PHP Chinese website!