Why do the border colors change on click?

Question

I'm trying to make a search -box with categories, like Amazon. The problem is that, when I click inside the text area, the borders change color creating a bad view effect. How can I stop it?

Here is the 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;
}

<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="form-wrapper">
  <button class="go-button fa fa-search"></button>
  <span class="nav-list">
  <span class="current-selection">
  </span>
  <select id="dropdown">
    <option value="books-and-ebooks">Books & eBooks</option>
    <option value="audiobooks">Audiobooks</option>
    <option value="dvds">DVDs</option>
    <option value="other-resources">Other Resources</option>
    <option value="random">Random</option>
  </select>
  </span>
  <div class="in-wrap">
    <input type="text" name="query" id="search-box">
  </div>
</div>

Now I realized that on JSFiddle is not working the same way as on codepen, so here is on codepen: http://codepen.io/1z10/pen/QEbjBx

Answer 1

It was happening because the browsers add outline on input field, to fix this you need to remove on input:focus the attribute outline, declaring this equals none. Like this CSS code:

#search-box:focus{
  outline:none;
}