Tumblr Text Input Boxes Debunked CSS3

Reference Site http://www.tumblr.com

I have been trying to figure out how tumblr input fields work. Switching the input box background image and yes it appears its a image as as seen here

http://www.tumblr.com/images/register_login/input.png

To test… type in only 2 characters so it gives you and error and see how the inputbox changes.

Does anyone have any information on this style of making input boxes.

I did bit more digging and found that the input=“text” box has class=“input_wrapper” but don’t see any javascript that switches classes when the mouse is over it… see below…

form .input_wrapper {
width:219px;
height:64px;
background:url(‘images/form/input.png’) 0 11px no-repeat;
border-width:0;
margin:0 0 0 -13px;
float:left;
position:relative
}
form .input_wrapper.error {
background-position:left -283px
}
form .input_wrapper.blurred {
background-position:left -136px
}

here is the html code

 <form method="post" action="login" id="login_form">
     <div class="input_wrapper">
                        <label for="login_email">Email address</label>
                        <input type="text" name="email" id="login_email" value=""/>
                    </div>
                    <div class="input_wrapper">
                        <label for="login_password">Password</label>

                        <input type="password" id="login_password" name="password" />
                    </div>
                    <button type="submit"><span>Log in</span></button>
                    <br class="clear" /><p class="forgot_password"><a href="/forgot_password">Forgot your password?</a></p>
                </form>
            </div>
        </div>