css 为什么单击时边框颜色会改变？

v1uwarro 于 2023-01-22 发布在其他

关注(0)|答案(4)|浏览(204)

我试着做一个分类搜索框，就像亚马逊一样。问题是，当我点击文本区域时，边框会改变颜色，造成不好的查看效果。我该怎么阻止它呢？
下面是代码：

$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

css

来源：https://stackoverflow.com/questions/37604975/why-do-the-border-colors-change-on-click

4条答案

按热度按时间

t5fffqht1#

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

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

赞(0）回复(0）举报 2023-01-22

jjhzyzn02#

把这个添加到你的css：

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

赞(0）回复(0）举报 2023-01-22

1cklez4t3#

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

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

赞(0）回复(0）举报 2023-01-22

anauzrmj4#

请不要使用outline:none;来禁用焦点轮廓。如果你这样做，你会扼杀网络的可访问性。有一个可访问的方法可以做到这一点。
看看我写的this article，它解释了如何正确地做到这一点，而不会为特定的用户群体破坏页面。

赞(0）回复(0）举报 2023-01-22