Styling Select Boxes in IE7

HTML & CSS
1

Hi,

I wonder if anyone can help me out here. I have searched around for an answer - but find it hard to believe that I need to use Javascript to resolve the issue.

I have just created this sample code to style both my input and select boxes in a form (i have used embedded css just for clarity in this example). Everything works a treat in IE8, FF, Chrome - but when it comes to IE7 all formatting for the select box is ignored.

Can anyone tell me if there’s an IE7 fix to enable the styling of select boxes ?

Many Thanks,

Chris.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title</title>
<style type="text/css">
<!--
input, textarea, select {
background:transparent url(images/bg_form.png) repeat-x scroll left top;
border:1px solid #E5E5E5;
font-size:12px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:100%;
outline-color:-moz-use-text-color;
outline-style:none;
outline-width:0;
padding:9px;
width:200px;
}
-->
</style>
</head>
<body>
<form method="post" id="form1"  name="contact-form" action="">
<input id="field1" name="field1" type="text" />
<select id="field2" name="field2">
<option value="XX">xx</option>
<option value="YY">yy</option>
</select>
</form>
</body>
</html>
2

Perhaps the best resource on styling differences of form elements is at: http://www.456bereastreet.com/archive/200409/styling_form_controls/

3

Thanks for this Paul…unfortunately IE7 wasn’t around when this article was posted (Posted on September 27, 2004 in CSS) and it doesn’t really help me.

4

Times, they do change. The article lists an update in 2007 at http://www.456bereastreet.com/archive/200701/styling_form_controls_with_css_revisited/

5

Hi,

No you can’t style much of a select in IE6 and 7 unfortunately. They won’t take height or padding and you can’t change the border colour either. (You can change the width, background-color and colur properties).

The only way they will increase their height is by changing the font-size.

They are a real pain at the best of times and the reason that we say leave form elements alone. Just wait until you try styling a file-input :slight_smile:

6

Thanks for the advice Paul - greatly appreciated.
I had read that this was a problem - but thought (hoped !) there might be a work around…

7

Oh but there is. The work-around is to use a better browser. :slight_smile:

For some reason though, it’s not wise to expect the same thing from our users.