title: css3 webkit transition width auto on focus
body: <p><a href="http://jsfiddle.net/Viruthagiri/MgcDU/1950/embedded/result/" rel="nofollow">Please check this demo first</a></p>
  
  <p>If you focus the search box it will expand to 400px.</p>
  
  <p>Thats because I set the width to 400px on focus</p>
  
  <pre><code>.navbar-search .search-query:focus {
   width:400px;
  -moz-transition: width 0.5s ease-out;
  -webkit-transition: width 0.5s ease-out;
  transition: width 0.5s ease-out;
  }
  </code></pre>
  
  <p>I would like to have 100% width search on focus.</p>
  
  <p>Can anyone help me with this? </p>
  
  <p><a href="http://jsfiddle.net/Viruthagiri/MgcDU/1950/" rel="nofollow">Here is the source code.</a></p>