form input background color, and hover in ie6

[ewwatson]

Hello everyone! OK, I got this pure css form looking pretty good if I don't say so myself, "but" there are a couple issues I can't figure out on my own. The only browsers that I am having problems in is Safari and IE6 - the rest are perfect! In safari I can't get the input fields to except the background color - although the textarea does. And in IE6 as you know it does not do hover on anything but <a>. So what is the best solution for IE6 to show a:hover - javascript, expressions, alternate css? Here is the form code - thanks alot!

label, input {
display: block;
width: 300px;
float: left;
margin-bottom: 1em;
}
textarea {
display: block;
width: 300px;
height: 140px;
float: left;
margin-bottom: 1em;
}
label {
text-align: right;
width: 150px;
padding-right: 20px;
}
input.submit {
width: 5em;
float: none;
margin-left: 171px;
}
br {
clear: left;
}
form input, form submit, form textarea {
background: #EEEEDF;
}
input:hover, submit:hover, textarea:hover {
background: #FEFEF8;
}
input:focus, submit:focus, textarea:focus {
background: #FEFEF8;
}
#content {
margin: 75px 0 9em 80px;
font-size: 1.2em;
}

<form>

<label for="first name">First Name:</label>
<input id="first name" name="first name"><br>

<label for="last name">Last Name:</label>
<input id="last name" name="last name"><br>

<label for="email">Email:</label>
<input id="email" name="email"><br>

<label for="comments">Comments:</label>
<textarea id="comments" name="comments"></textarea><br>

<input type="button" value="Submit" class="submit">

</form>

[DrDoc]

You can always double up by using input:focus (for CSS support without JS support) and then use

onfocus="this.className = 'foo';" onblur="this.className = 'bar';"

for when JS support is available without sufficient CSS support (such as IE6 and older)

[edited by: DrDoc at 3:42 am (utc) on Mar. 25, 2008]

[ewwatson]

Thanks DrDoc! So thats all the js I need for ie6? Just wrap those two lines in a js script block and I'm good to go? How about safari though, any suggestions for that? Thanks!

[DrDoc]

That will work in any relatively recent browser that supports JavaScript ...

[swa66]

Safari users expect their browser to have it's own input look and feel (and AFAIK that's what's allowed in the standards.

IE6: Try the IE7 (or IE8) scripts to make it a bit more compliant:
[code.google.com...]

[ewwatson]

This is what I came up with as a fix for IE6. From what I have read there is no solution for Safari.

* html .iehover { /* IE6 hover */
m: expression(this.onmouseover = new Function("this.className = 'iehover-hover';"));
}
* html .iehover:hover, * html .iehover-hover{ /* IE6 hover */
background: #FEFEF8;
m: expression(this.onmouseout = new Function("this.className = 'iehover';"));
}
* html .iesubmithover { /* IE6 hover */
width: 5em;
float: none;
margin-left: 171px;
m: expression(this.onmouseover = new Function("this.className = 'iesubmithover-hover';"));
}
* html .iesubmithover:hover, * html .iesubmithover-hover { /* IE6 hover */
width: 5em;
float: none;
margin-left: 171px;
background: #FEFEF8;
m: expression(this.onmouseout = new Function("this.className = 'iesubmithover';"));
}