Question

我正在尝试制作一个包含亚马逊等类别的搜索框。现在的问题是，我无法理解为什么当我在文本内部单击时，边框会改变颜色，从而产生不良的视图效果。我怎么能阻止它？这是代码：

$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

试试这可能会对你有所帮助。我只是改变了高度...

＆＃13;

<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>


<style>



    $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: 36px;
      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;
    }
   textarea:focus, input:focus{
         outline: none;
 }
    .in-wrap {
      overflow: hidden;
      height: 100%;
    }

    #search-box {
      width: 100%;
      height: 30px;
      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: 36px;
      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;
    }
</style>

<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>

＆＃13;

Answer 2

将此添加到您的css：

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

Answer 3

之所以发生这种情况是因为浏览器在输入字段中添加了大纲，为了解决此问题，您需要删除 输入：focus 属性大纲，声明此等于无。喜欢这个CSS代码：

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

Answer 4

请不要使用2016-06-28 13:53:05,048 INFO [main] b.PrimeMember (PrimeMember.java:41) - isClusterSafe:true,isLocalMemberSafe:true,number of entries owned on this node = 997465 2016-06-28 13:53:06,049 INFO [main] b.PrimeMember (PrimeMember.java:41) - isClusterSafe:true,isLocalMemberSafe:true,number of entries owned on this node = 997465 2016-06-28 13:53:07,050 INFO [main] b.PrimeMember (PrimeMember.java:41) - isClusterSafe:true,isLocalMemberSafe:true,number of entries owned on this node = 997465来禁用焦点大纲。如果您这样做，则会破坏Web的可访问性。有一种方法可以做到这一点。

查看我撰写的this article，以解释如何正确执行此操作，而不会破坏您的某个特定用户群的页面。

为什么点击时边框颜色会发生变化？

4 个答案: