title: How to have a close icon show up on <input> active state
body: <p>I have a input field with search icon. When the input field is pressed/focused I want to have a close icon show up on the input box as in the below image</p>
  
  <p><img src="https://i.stack.imgur.com/BDqPl.jpg" alt="InActive State"></p>
  
  <p><img src="https://i.stack.imgur.com/eV9F5.gif" alt="Active State"></p>
  
  <p><a href="http://jsfiddle.net/WUPpQ/3/" rel="nofollow noreferrer">jsfiddle</a></p>
  
  <pre><code>&lt;div id="search-controls"&gt;
     &lt;input type="text" class="search-box in-acvtive" placeholder="e.g. restaurant name, cuisine" /&gt;
  &lt;/div&gt;
  
  #search-controls {
      height: 68px;
      padding: 5px;
  }
  
  #search-controls input.ui-input-text {
      height: 26px;
      background: url('../img/search-icon.png') 99.5% center no-repeat;
      background-size: 16px 14px;
      border: 1px solid #999;
      -moz-border-radius: 2px;
      border-radius: 2px;
      -moz-box-shadow: inset 0px 5px 10px -5px #BBB;
      -webkit-box-shadow: inset 0px 5px 10px -5px #BBB;
      box-shadow: inset 0px 0px 5px 10px -5px #BBB;
      padding: 6px 5px 0 5px;
      margin: 0 0 5px 0;
      font-size: 15px;
      line-height: 15px;
  }
  
  #search-controls input.ui-input-text.ui-focus {
      border: 1px solid #9E0249;
      border-radius: 2px;
      -moz-border-radius: 2px;
      -webkit-border-radius: 2px;
      box-shadow: none;
      moz-box-shadow: none;
      -webkit-box-shadow: none;
      background: url('../img/search-active-icon.png') 100% center no-repeat;
  }
  </code></pre>