Question

所以我的页面上有一个搜索框。在页面加载时，它看起来像这样：

但是，在输入任何文本然后将其删除后，该框如下所示：

输入新文字时，边框会消失并看起来像原始状态。

我不相信CSS会在这些事件发生时以任何方式改变它

.search {
  padding: 8px 15px;
  background: rgba(50, 50, 50, 0.2);
  border: 1px solid #dbdbdb;
}
.search:hover {
  background: rgba(0, 0, 0, .3);
}
.search:focus {
  background: rgba(0, 0, 0, 0);
}
.button {
  position: relative;
  padding: 6px 15px;
  left: -8px;
  border: 2px solid #207cca;
  background-color: #207cca;
  color: #fafafa;
  font-size: 12px;
  cursor: default;
}
.button:hover {
  background-color: #fafafa;
}

出现的边框是文档中许多DIV的样式，但它们不应该应用于搜索框。

编辑：这不是出现大纲的一个例子。仅在搜索框失去焦点后才会显示轮廓（我单击页面上的其他位置）。输入文本时，轮廓也将消失。编辑＃2：这是相关的HTML：

    <td style="min-width:254px">
          <input type="text" placeholder="Search..." required class="search">
          <input type="button" value="Search" class = "button">
          <script>
              $('.button').click(search);
              $('.search').keypress(function(e)
              {
                  var code = (e.keyCode ? e.keyCode : e.which);
                  if(code == 13) 
                  {
                      search();

                  }
              });    
              function search()
              {
                  window.location.href = "country.html/?country=" + $('.search').val().toLowerCase();
              }
          </script>
      </td>

Answer 1

它似乎在焦点上有边框和框阴影：尝试在下面添加到css

.search:focus {
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

还要检查删除文本后是否有任何其他类被添加（例如，在角度为ng-dirty的情况下）

Answer 2

您需要outline: none;

以下是关于outline属性的一些内容，以便您知道它的作用以及如何使用它：LINK

＆＃13;

.search {
  padding: 8px 15px;
  background: rgba(50, 50, 50, 0.2);
  border: 1px solid #dbdbdb;
}

.search:hover {
  background: rgba(0, 0, 0, .3);
}

.search:focus {
  background: rgba(0, 0, 0, 0);
  outline: none;
}

.button {
  position: relative;
  padding: 6px 15px;
  left: -8px;
  border: 2px solid #207cca;
  background-color: #207cca;
  color: #fafafa;
  font-size: 12px;
  cursor: default;
}

.button:hover {
  background-color: #fafafa;
}

＆＃13;

<input class="search">
<button class="button">Search</button>

＆＃13;

随机边框出现在搜索框中

2 个答案: