title: Expand input field on focus
body: <p>I want to expand a search box <strong>to the left</strong> on focus. Following code will expand, but it will expand towards right. Is there anyway to expand it to the left?</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;input type="text" placeholder="search"&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code> input[type="text"] {
      background: #444;
      border: 0 none;
      color: #d7d7d7;
      width:50px;
      padding: 6px 15px 6px 35px;
      -webkit-border-radius: 20px;
      -moz-border-radius: 20px;
      border-radius: 20px;
       margin:3px 12px;
  }
  
  input[type="text"]:focus {
      background:#ccc;
      color: #6a6f75;
      width: 120px;    
      margin:3px 12px;
      outline: none;
  }
  
  input[type="text"] {
      -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;
  }
  </code></pre>
  
  <p><strong>Demo:</strong>
  <a href="http://jsfiddle.net/7ppaS/" rel="noreferrer">http://jsfiddle.net/7ppaS/</a></p>