title: Can't control clickable area in CSS transition
body: <p>I am attempting to create a sliding search bar/box that moves on transition when you select the magnifying glass. The issue it that there is only a small space in which you are able to select the magnifying glass to open the search bar. Then, when the search bar has been opened, the space to close it moves back (to the right of the magnifying glass) about 5 px. I would like for the selectable area to be on the magnifying glass the entire time. </p>
  
  <p>This is the HTML</p>
  
  <pre><code>&lt;div class="wrap"&gt;
    &lt;form action="" autocomplete="on"&gt;
      &lt;input id="search" name="search" type="text" placeholder="Search by Address, Agent or Client..."/&gt;
     &lt;span class="fa fa-search"&gt;&lt;/span&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p></p>
  
  <p>This is the CSS</p>
  
  <pre><code>body {
  background: #005DC1;
  font-size: 15px;
  }
  
  .wrap {
   position: relative;
   right: 50px;
   height: 22px;
   float: right;
  }
  
  input[type="text"] {
  height: 20px;
  width: 0px; 
  font-size: 12px;
  font-family: helvetica;
  border: none;
  outline: none;
  color: rgba(255, 255, 255, 0.8);
  padding: 3px;
  position: absolute;
  top: 0;
  right: 0;
  background: none;
  z-index: 1;
  transition: width .4s cubic-bezier(0.000, 0.795, 0.000, 1.000);
  cursor: pointer;
  }
  
  input[type="text"]:focus:hover {
   border-bottom: 1px solid #fff;
  }
  
  input[type="text"]:focus {
    width: 250px;
    z-index: 1;
    border-bottom: 1px solid #fff;
    cursor: text;
  }
  
  .wrap span {
    color: rgba(255, 255, 255, 0.8);
    z-index: 5000;
    cursor: pointer;
    right: 3px;
    height: 20px;
    width: 25px;
  }
  </code></pre>
  
  <p>Here is my current <a href="http://codepen.io/tracyalison11/pen/NGygqM?editors=110" rel="nofollow">CodePen</a>.</p>
  
  <p>Here is the original <a href="http://codepen.io/CBeghin/pen/HeuiF" rel="nofollow">Codepen</a> I am attempting to mimic with my own design.</p>