CSS: animating form elements

With the brand new CSS3 transitions we can create interesting animations on form elements. For example, we can outline a text input by increasing its size and changing its background and border color when it gets the focus state. Let's see how.

Since browsers add a dynamic outline on form elements when they get focus, the following code removes the outline as well:

#search #q {
	width: 190px;
	border: 1px solid #aaa;
	border-radius: 8px;
	background: #fff;
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	-ms-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;

#search #q:focus {
	width: 230px;
	outline-style: none;
	border-color: #000;
	background: #eee;
	font-size: 1.4em;

Since element's dimensions are also determined by the actual font size in use, we've changed also this property. You can see the demo below.


Live demo

This entry was posted in by Gabriele Romanato. Bookmark the permalink.

Leave a Reply

Note: Only a member of this blog may post a comment.