title: Why do the border colors change on click?
body: <p>I'm trying to make a searc-box with categories, like Amazon. Now the problem is that I can't understand why when I click inside the text are, borders change color creating a bad view effect. How can I stop it?
  Here is the code: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>$border-color: orange;
  #form-wrapper {
    width: 50%;
    height: 40px;
  }
  
  .nav-list {
    padding: 10px 25px 10px 5px;
    position: relative;
    float: left;
    border: 1px solid $border-color;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }
  
  #dropdown {
    cursor: pointer;
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border: 1px solid $border-color;
  }
  
  #dropdown:hover {
    background-color: lightgray;
  }
  
  .current-selection {
    display: inline-block;
    font-size: 14px;
  }
  
  .in-wrap {
    overflow: hidden;
    height: 100%;
  }
  
  #search-box {
    width: 100%;
    height: 36px;
    border: 1px solid $border-color;
    border-left: none;
    border-right: none;
    line-height: 25px;
    font-size: 18px;
    padding-left: 100px;
  }
  
  .go-button {
    float: right;
    height: 100%;
    background-color: orange;
    border: 1px solid $border-color;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    margin: 0;
    padding: 0 15px;
  }
  
  .go-button:hover {
    background-color: rgb(255, 115, 0);
    cursor: pointer;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/&gt;
  &lt;div id="form-wrapper"&gt;
    &lt;button class="go-button fa fa-search"&gt;&lt;/button&gt;
    &lt;span class="nav-list"&gt;
    &lt;span class="current-selection"&gt;
    &lt;/span&gt;
    &lt;select id="dropdown"&gt;
      &lt;option value="books-and-ebooks"&gt;Books &amp; eBooks&lt;/option&gt;
      &lt;option value="audiobooks"&gt;Audiobooks&lt;/option&gt;
      &lt;option value="dvds"&gt;DVDs&lt;/option&gt;
      &lt;option value="other-resources"&gt;Other Resources&lt;/option&gt;
      &lt;option value="random"&gt;Random&lt;/option&gt;
    &lt;/select&gt;
    &lt;/span&gt;
    &lt;div class="in-wrap"&gt;
      &lt;input type="text" name="query" id="search-box"&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Now I realized that on JSFiddle is not working the same way as on codepen, so here is on codepen: <a href="http://codepen.io/1z10/pen/QEbjBx" rel="nofollow">http://codepen.io/1z10/pen/QEbjBx</a></p>