Apple Website Like Animated Search Box with CSS3 Transitions

Preview:

Description:

The goal is to create an animated search box that will automatically expand with smooth CSS3 transition based animation when focused on, as you seen in Apple’s official website. Built by molenmaulana.

How to use it:

Create an input box for the search box.

<input name="q" type="text" size="30" placeholder="Search some stuffs">

The CSS to style the search box and animate it when focused on.

input[type="text"] {
  background: url(search.png) no-repeat 10px 6px #444;
  border: 0 none;
  font: bold 12px Arial, Helvetica, Sans-serif;
  color: #cccccc;
  width: 107px;
  padding: 6px 15px 6px 35px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
  -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
  -webkit-transition: all 0.7s ease 0s;
  -moz-transition: all 0.7s ease 0s;
  -o-transition: all 0.7s ease 0s;
  transition: all 0.7s ease 0s;
}

input[type="text"]:focus { width: 150px; }