html - 为什么单击时边框颜色会发生变化？

Question

我正在尝试制作一个带有类别的搜索框，例如亚马逊。问题是，当我在文本区域内单击时，边框会改变颜色，从而产生糟糕的 View 效果。我该如何阻止它？

代码如下:

$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>

现在我意识到在 JSFiddle 上的工作方式与在 codepen 上的工作方式不同，所以在 codepen 上:http://codepen.io/1z10/pen/QEbjBx

Answer 1

这是因为浏览器在输入字段上添加了 outline，要解决这个问题，您需要在 input:focus 上删除 outline 属性，声明它等于none。像这样的 CSS 代码:

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