19
Jul
2012

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.

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

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');
});
});
</script>

Done!!!
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