Creating a red border around a select

I would like to give a <select> a red border around it. (The border indicates a required form field.) Using CSS to suggest the border color does not have the desired effect in all browsers (most notably: Internet Explorer). Below is an example of how border: 2px inset red; renders:

As MSIE does not honour requests for setting the border color of select elements, some other way has to be found. So far, I've found two ways to achieve the desired visual effect.

Using a table

Placing a table around the <select> seems to have the desired effect. (Note that this removes the select from it's inline context.) However, this is structurally bad markup.

table.test1 { padding: 0; border: 1px solid red; }
...
Lorum ipsum,
<table cellspacing=0 cellpadding=0 class=test1 border><tr><td><select>
 <option>Option 1</option>
 <option>Option 2</option>
</select></td></tr></table>
lorum ipsum.

…renders as:

Using a span

Another try, using CSS display: table-cell; on a span:

span.test2 { border: 1px solid red; display: table-cell; }
...
Lorum ipsum,
<span class=test2><select>
 <option>Option 1</option>
 <option>Option 2</option>
</select></span>
lorum ipsum.

…renders as:

This has the desired visual effect on IE > 5.0 (because it ignores display: table-cell; but (erroneously) stretches the <span> vertically to contain the <select>). It works on Mozilla because it does honour display: table-cell;. Better markup, I'd say, but still removes the <select> from it's inline context on Mozilla.

(Tested with IE 6.0 SP1 and Mozilla 1.2. Opera 7.0+ seems to work as Mozilla, but has not been tested much.)

Check HTML - Check CSS - Index