如何重置/删除 chrome 的输入突出显示/焦点边框？ [复制]答案

【问题标题】：How to reset / remove chrome's input highlighting / focus border? [duplicate]如何重置/删除 chrome 的输入突出显示/焦点边框？ [复制]
【发布时间】：2011-02-25 23:28:23
【问题描述】：

我已经看到 chrome 在:focus 上设置了更厚的边框，但在我也使用了border-radius 的情况下，它看起来有点不对劲。无论如何要删除它吗？

【问题讨论】：

试试这个css，它对我有用textarea:focus, input:focus{ border: none; }

标签： css google-chrome focus border

【解决方案1】：

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

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

示例：

button {
  border-radius: 20px;
  padding: 20px;
}

.no-focusborder:focus {
  outline-style: none;
  box-shadow: none;
  border-color: transparent;
  background-color: black;
  color: white;
}

<p>Click in the white space, then press the "Tab" key.</p>
<button>Button 1 (unchanged)</button>
<button class="no-focusborder">Button 2 (no focus border, custom focus indicator to show focus is present but the unwanted highlight is gone)</button>
<br/><br/><br/><br/><br/><br/>

【讨论】：

这应该是最佳答案，它是唯一一个完全消除焦点上的阴影/边框的答案。
唯一有效的解决方案
终于找到了一款可以在手机上运行的！
尝试了很多其他方法，但这是唯一有效的方法。
这个只对我有用

【解决方案2】：

您应该可以使用

将其删除

outline: none;

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

【讨论】：

我确实在:focus 上更改了background-color 和color 属性/属性（不管你怎么称呼它）所以我想它仍然可以
是的。像某些重置一样全局设置 outline: none 是一个错误，因为它会降低键盘的可访问性，但如果您有另一种清晰的反映专注度的方法，则可以删除 outline。
+1 说明这是一个非常糟糕的做法。这会使键盘的使用非常烦人。
这是 Chrome 的一个可怕的想法，但是很好，他们让它很容易关闭。当然，如果你不做其他事情来表现专注，那是不好的做法，但谁会做这么愚蠢的事情呢？这些天在大约 1% 的网站上看起来不错，因为每个人都在做完全自定义的事情。使用“标准”外观控件已成为过去。
但是对于基于select 下拉菜单的移动导航菜单，这是非常好的做法。

【解决方案3】：

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

input {
  outline: none;
}

我希望你觉得这很有用。

【讨论】：

【解决方案4】：

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

这应该可以解决问题。

【讨论】：

【解决方案5】：

问题是你已经有了一个大纲。 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;
}

【讨论】：

【解决方案6】：

这肯定会奏效。橙色轮廓将不再显示.. 所有标签通用：

*:focus {
    outline: none;
   }

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

input:focus{
   outline:none;
  }

【讨论】：

【解决方案7】：

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

:focus {outline:none;}

然后，您可以按元素单独控制焦点边框颜色，也可以在默认的 .css 中控制：

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

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

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

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

:-)

【讨论】：

【解决方案8】：

您可以将outline: none; 和边框设置为不同的焦点颜色。

【讨论】：