Change Background Color of form field on focus

Posted in: jQuery , No Comments

In this tutorial I will show you how we can use jQuery to change form field background on focus. This makes our form attractive.

Step 1:
Make a HTML form.

<label>Name:</label> <input type="text" />
<label>Email:</label> <input type="email" />
<label>Password:</label> <input type="password" />
<input type="button" value="submit" />

Step 2:
Call jQuery Library.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Step 3:
Now we will add jQuery code in head section and tell it to find form fields and change its background color to #faf0b7 on focus. And on removing focus, background color will go back to white.

<script type="text/javascript">
$(document).ready(function() {
$(":input").focus(function() {
$(this).css('background', '#faf0b7');
$(":input").blur(function() {
$(this).css('background', '#fff');

Check demo

You can add CSS to style form fields as I have done in demo example

About the Author

Name: Ravi Shekhar
I love learning and sharing web stuffs.

Share this post

Twitter Facebook Google Buzz Digg StumbleUpon Delicious Technorati

Leave a Reply