如何重置/删除chrome的输入突出显示/焦点边框？

Question

我已经看到chrome在:focus上放置了一个较粗的边框，但在我的情况下我也使用了border-radius。反正有没有删除？

Answer 1

您应该可以使用

将其删除

outline: none;

但请记住，这可能对可用性有害：很难判断一个元素是否已被聚焦，当您使用 Tab 键遍历所有表单的元素时，这会很糟糕 - 您应该以某种方式反映元素的重点。

Answer 2

我必须完成以下所有操作才能完全删除它

outline-style:none;
box-shadow:none;
border-color:transparent;

Answer 3

要删除默认焦点，请在默认的.css文件中使用以下内容：

:focus {outline:none;}

然后，您可以按元素或默认的.css：

单独控制焦点边框颜色

:focus {outline:none;border:1px solid red}

显然用您选择的十六进制代码替换red。

您也可以保持边框不受影响并控制背景颜色（或图像）以突出显示该字段：

:focus {outline:none;background-color:red}

： - ）

Answer 4

这肯定会奏效。橙色轮廓不再出现.. 所有标签的共同点：

*:focus {
    outline: none;
   }

特定于某些标签，例如：输入标签

input:focus{
   outline:none;
  }

Answer 5

border:0;
outline:none;
box-shadow:none;

这应该可以解决问题。

Answer 6

最简单的方法是使用类似的东西，但请注意它可能不那么好。

input {
  outline: none;
}

我希望你觉得这很有用。

Answer 7

Answer 8

问题是你已经有了一个大纲。 Chrome仍然会改变一些东西，这真的很痛苦。我找不到要改变的地方：

.search input {
  outline: .5em solid black;
  width:41%;
  background-color:white;
  border:none;
  font-size:1.4em;
  padding: 0 0.5em 0 0.5em;
  border-radius:3px;
  margin:0;
  height:2em;
}

.search input:focus, .search input:hover {
  outline: .5em solid black !important;
  box-shadow:none;
  border-color:transparent;;
 }

.search button {
  border:none;
  outline: .5em solid black;
  color:white;
  font-size:1.4em;
  padding: 0 0.9em 0 0.9em;
  border-radius: 3px;
  margin:0;
  height:2em;
  background: -webkit-gradient(linear, left top, left bottom, from(#4EB4F8), to(#4198DE));
  background: -webkit-linear-gradient(#4EB4F8, #4198DE);
  background: -moz-linear-gradient(top, #4EB4F8, #4198DE);
  background: -ms-linear-gradient(#4EB4F8, #4198DE);
  background: -o-linear-gradient(#4EB4F8, #4198DE);
  background: linear-gradient(#4EB4F8, #4198DE);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4EB4F8', endColorstr='#4198DE');
  zoom: 1;
}