20
Jul
2012

Glowing form field on focus

Posted in: CSS , No Comments


You may have seen glowing form fields on focus on many modern websites like twitter.com Form fields will glow when you focus on it. This can be done using CSS3 box-shadow and transition property.

Step 1:
Make a HTML form.

<form class="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:
Add CSS for form input fields.

.form input{
border: 1px solid #ddd;
outline: none;
border-radius: 4px;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
transition: all 0.30s ease-in-out;
}
	
.form input:focus {
border-color: #83b4db;
box-shadow: 0 0 10px #8fbfe6;
-moz-box-shadow: 0 0 10px #8fbfe6;
-webkit-box-shadow: 0 0 10px #8fbfe6;
}

Done!!!
Check demo

You can add more CSS to style form 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