Remove Select arrow on IE

Dealing with pesky dropdown arrows

Cross-browser support: Level Up

To achieve a refined cross-browser experience, apart from hiding the default dropdown arrow, you would often replace it with a custom icon. To do this effectively, house your select element in a div wrapper:

<div class="select-wrapper">
  <select><!-- Options here --></select>
</div>


.select-wrapper {
    position: relative;
    display: inline-block;
    overflow: hidden; /* Remember Dory? Just keep hiding, just keep hiding... */
    background: url('custom-arrow.svg') no-repeat right; /* Your fancy icon */
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* Style-ception follows */
}


In the context of icon fonts, the :before pseudo-element enters as your styling superstar. Modifying its properties, you can even overlay a tailored icon over the detested native select arrow:

.select-wrapper:before {
    content: '▼'; /* Nope, it's not an arrow. It's a seagull diving headfirst */
    font-family: 'Awesome Icons'; /* Your fancy icon set */
    position: absolute;
    right: 10px;
    top: calc(50% - 0.5em); /* Centering YuGiOh style: "Heart of the cards" */
    pointer-events: none; /* The finger of disapproval */
}


Aesthetic and Accessibility: A Balancing Act

Remember, wherever there are styles, there are states. Consider accessibility limitations and creative demands by styling not only the standard, but also :focus and :disabled pseudo-classes of the select element:

select:focus {
    outline: none; /* Leave no trace... */
}

select:disabled {
    opacity: 0.5; /* Grayed out like an old photo */
}


This allows you to extend the aesthetic consistency across form elements, whilst still providing clear and considerate user-feedback on the usability of the select dropdown.

Throwing a lifeline to legacy IE users

Now, for IE9 and earlier versions, we hit a rock due to the non-existence of ::-ms-expand. Here we summon JavaScript workarounds or conditional comments for extra special attention:

<!--[if lte IE 9]>
<style>
    .select-wrapper { 
        /* trusty ol' styles for IE9 and its ancestors */ 
    }
</style>
<![endif]-->


When built-in solutions are just not enough

Chosen.js - Your selectable sidekick

When looking for a richly decorated UI experience or dealing with complex needs, a robust solution like Chosen.js may be the righteous path:

$(".your-select").chosen(); /* Yes, you're indeed the chosen one */


With Chosen.js, you have a library that manages the finer complexities of select box customization. Offering advanced features like search and tagging, it ensures a uniformed display across different browsers.

DIY - Opt for a custom JavaScript plugin

For some, the unique appeal or the need for granular control of the select element might lead you to create a custom JavaScript plugin.

// Example skeleton for a custom select plugin
(function($) {
    $.fn.customSelect = function(options) {
        return this.each(function() {
            // Your ninja initialization and plugin logic here
        });
    };
}(jQuery));

$('select').customSelect(); /* DIY Level: Master */


With your plugin, you control every interaction to the finest detail, from keypress handlers to option rendering. You have the power to bring your creative vision to life.