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.

Demo

Live demo