Browser testing can be one of the most daunting tasks for a web designer or developer, especially when that scope includes IE8 and IE9. Besides the usual background size and image fixes, the most difficult task to regulate is the dreaded select dropdown element. All browsers have their own default arrow on dropdown elements, unless specified otherwise by the CSS style sheet. In modern browsers ‚ Chrome, FireFox, Safari ‚ this is not a big deal and can simply be achieved with the following:
border:none; -moz-appearance: none; -webkit-appearance: none; appearance: none; And in IE10 this actually isn't too difficult to deal with either:
<pre><code>select::-ms-expand { display: none; } </code></pre>
IE9 and IE8 Are a Problem
However, when it comes to IE9 and IE8 the headache begins. None of the above CSS hacks can be seen by either browser. On smaller sites with less dropdown elements across the site, the simple method would be to use a wrapper on each select element and apply an overflow:hidden. Then set the select menu to 120% width of the wrapper, which in turn hides the dropdown arrow. Of course, you then run into problems with the child elements' text being cut off and a few other nuisances that come with this method.
After having gone through a number of sites using the above method, I have finally found the best solution: ChosenJS.
Chosen is a library for making long, unwieldy select boxes more user-friendly. It takes the pain out of styling dropdown menus by searching for existing select elements on the page and replacing them with a more intuitive solution for the user and the developer. It's easy to initialize, customize, and style.
The Solution
Enough rambling: I'll show you how I made this plugin work with a site that had already been designed and styled completely with the assistance of the Bootstrap 3 framework and some helpful Chosen CSS overrides to make it Bootstrap 3 friendly. I am going to skip over the basic install steps for ChosenJS, and recommend that you read their documentation separately, and simply cut straight to the customization.
The site I was testing had the dropdown elements styled to perfection in modern browsers, so I decided to initialize ChosenJS in IE8 and IE9 only. I used the following snippet just before my closing tag in the footer:
<pre><code> </code></pre>
You'll see here I am only targeting the select elements with the default bootstrap class —form-control,— and disabling the default search feature in ChosenJS since we simply didn't need it. I also called the respective resources conditionally the same way in my header:
<code><!--/!--[if lte IE 9]--> <link rel="stylesheet" href="/css/chosen.css"> <!--[endif]--//-->I found this VERY helpful style sheet made specifically for those usingTwitter Bootstrap in addition to ChosenJS bootstrap CSS.
I simply stuck this style sheet to the bottom of my existing, default ChosenJS CSS, and all was well from then on ‚ well, with a few slight tweaks to colors and font sizes. The dropdown elements were identical in all browsers required by the client and I saved myself a few hours initially, and potentially days over the course of the next few years of browser testing. I hope you find this solution saves you time, too! Enjoy!