Styling <select> inputs - even in IE...

[foid025]

Hello all,
I've got a form that I'm styling in CSS to change a few things - border, size, etc.

Everything works great except <select> type inputs in IE. I'm trying to override their default height, width, border, and background color when the element gets focus.

The only thing that works is the overriden width. Everything works in Firefox though, which is the only browser I could get my hands on to test.

Here's the HTML:
<select class='form_input' name="returnFlight_airline" id="newTripPane_form_returnFlight_airline" style="width: 60px; height: 33px;" onfocus="formInputFocus()">
<option value=AA>AA</option><option value=AF>AF</option><option value=AZ>AZ</option>
</select>

And the CSS behind it:

.form_input {
border: solid 2px #224061;
padding: 4px 4px 4px 10px;
height: 20px;
font-size: 15px;
}
.form_input:focus, .form_input:hover {
background-color: #E4EDF6;
}

Any idea how to make this work, at least in modern versions of IE? I've seen a number of sites with heavily modified forms so I think it should be possible... Having trouble finding anything though. Thank you!

[Jeff Mott]

It may simply be that IE doesn't allow much styling of select elements. To produce heavily modified controls, other sites use JavaScript to hide the real control and replace it with a custom DIV structure. Then CSS and more JS is used to create the appearance and behavior of a select menu.

For an example, see http://developer.yahoo.com/yui/examples/button/button-menu-select.html