How to style and colour select box borders in Internet Explorer byAndy Mantell
Styling and colouring select box borders in Internet Explorer has always been a bit of a problem. They’re unruly beasts that can’t be tamed with css as is possible in Firefox. In this situation, some would propose re-creating the select box using a mixture of unordered lists and javascript which has always seemed overkill to me and I’m generally not willing to do this for something as minor as a border colour.
However, tell a designer that and I’m met with the blank stare of one who is determined not to bow to my protests of browser incompatibilities. So I’ve concocted something which I believe may be a good solution. It’s not fully tested yet as I don’t have access to IE6 here but here goes anyway:
All select elements in this example have the following styles applied:
select {
height : 22px;
border : 1px solid red;
display : block;
width : 150px;
}
The following example is a simple form with a select element styled such that it has a red border. Firefox users will see a red border but IE users will not.
The solution I have come up with, is to wrap the select box inside a containing div and apply the following styling:
- Red border moved onto the div instead of the select box.
- Containing div given a height and width of 2 pixels less than the select box
- The select box is moved up and left by 1 pixel using negative margins
div.redBorderTest {
overflow : hidden;
border : 1px solid red;
width : 148px;
height : 20px;
}
div.redBorderTest select {
display : block;
float : none;
margin-top : -1px;
margin-left : -1px;
}
This results in the following example:
<div class="Jul052008">
<form>
<fieldset>
<legend>Red border applied directly to a containing div</legend>
<label for="option2">Option 2</label>
<div class="redBorderTest">
<select>
<option>I</option>
<option>Like</option>
<option>Pie</option>
</select>
</div>
</fieldset>
</form>
</div>
As of the time of writing, this has been tested working IE7 and Firefox, further tests pending… 
If you aren’t happy with littering your nice markup with extra divs to fix problems that only occur in IE, then you can easily insert this extra div only for internet explorer by doing something like the following:
<!--[if IE]>
<script type="text/javascript">
var $replaceSelect = null;
/*
Grab your select boxes from the document
In this case I am only selecting the ones in the form with an id of wrapSelect
If you want to, get all of the select elements with this line:
var $selectBoxes = document.getElementsByTagName(’select’);
*/
var $selectBoxes = document.forms['wrapSelect'].getElementsByTagName(’select’);
/*Loop through them*/
for (var $iCount=0;$iCount<$selectBoxes.length;$iCount++) {
/*Create a wrapper div for the select element*/
$wrapperDiv = document.createElement(’div’);
/*Give it the right classname*/
$wrapperDiv.className=’redBorderTest’;
/*Insert the wrapper div after the previous sibling of the select element*/
$selectBoxes[$iCount].parentNode.insertBefore($wrapperDiv,$selectBoxes[$iCount].nextSibling);
/*Move the select element inside the wrapper*/
$wrapperDiv.appendChild($selectBoxes[$iCount]);
}
</script>
<![endif]–>
This example below uses this javascript code to target IE. Firefox and other browsers will get the normal markup, with red borders applied in css. IE will get the extra div in order to apply the styles.
Hope it works for someone
Andy