Search box fanciness

by austegard

HTML

<div id="header">
<h1>Some Header</h1>
<input id="search" type="search" placeholder="Search me">
</div>

CSS

div {height: 30px; padding: 10px; background-color: black; color: white;}
h1 {font-size: 16pt; float: left}
#search {float: right; 
    background: black;
    width: 150px;
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
  -webkit-transition-property: background-color,width;
     -moz-transition-property: background-color,width;
      -ms-transition-property: background-color,width;
       -o-transition-property: background-color,width;
          transition-property: background-color,width;
}
#search:focus {
    width: 200px; background: #fff;
}