Question

This is driving me nuts.

http://www.cssdrive.com/index.php/examples/exampleitem/focus_pseudo_class

This is an example of using the hover pseudo-class. Works fine in Chrome and IE. When I save locally it works fine in Chrome but won’t work in IE. What am I doing wrong!?

<link rel="Stylesheet" href="style.css" />
<form>
    <p>1) Name:<br />
    <input type="text" size="40"></p>

    <p>2) Email address:<br />
    <input type="text" size="40"></p>

    <p>3) Comments:<br />
    <textarea rows="5" name="comments" cols="45" wrap="virtual"></textarea></p>

    <p><input id="actualsubmit" type="submit" value="Submit"></p>
</form>

style.css:

input:focus, textarea:focus{
    background-color: lightyellow;
}   

EDIT:
The style sheet is applying – can be tested by background-color: black. But the focus effect is not working.

Answer 1

I believe that IE8 still doesn’t support it properly, here’s a JS workaround:
http://james.padolsey.com/javascript/fixing-focus-in-internet-explorer/