OnFocus and OnBlur style changes works in Fire Fox but not in IE

Question

Hi all, I have the following styles in my CSS:

.on_focus {
    background-color:yellow;
}
.off_focus {
    background-color:white;
}

Then I have this input in my form:

            <label>Last Name</label><br/>
            <input id="l_name" class="text" type="text" name="l_name" maxlength="20" onfocus="this.className='on_focus'" onblur="this.className='off_focus'"/><br/><br/>

This works great in Fire Fox but does not work at all in IE. In IE the background color never changes, it is always white regardless if the field has focus or not. What is the deal here?

Answer 1

It's not the only option, but you can actually do this with just CSS.

Your CSS:

input[type="text"]:focus {background-color:Yellow;}
input[type="text"]:blur {background-color:White;}

Your HTML:

<label for="l_name">Last Name</label>
<input type="text" id="l_name" />

I've added the attribute selector for type=text, so this would only work on those types of input tags.

--EDIT--

As far as IE goes, the above will only work on IE8. So, for a JavaScript solution, try this maybe?

<script type="text/javascript">
    function onFocus(element) {
        //element.style.backgroundColor = "Yellow";
        element.className = "on_focus";
    }
    function onBlur(element) {
        //element.style.backgroundColor = "White";
        element.className = "off_focus";
    }
</script>

Your HTML:

<label for="l_name">Last Name</label> 
<input type="text" id="l_name" onfocus="onFocus(this);" onblur="onBlur(this);" />