如何删除文本/输入框周围的焦点边框（轮廓）？ （铬）[重复]

Question

任何人都可以解释如何删除文本/输入框周围的橙色或蓝色边框（轮廓）吗？我认为这只发生在 Chrome 上以显示输入框处于活动状态。这是我正在使用的输入 CSS：

input {
    background-color: transparent;
    border: 0px solid;
    height: 20px;
    width: 160px;
    color: #CCC;
}

Answer 1

此边框用于显示该元素已获得焦点（即您可以输入内容或按 Enter 键）。不过，您可以使用 outline 属性删除它：

textarea:focus, input:focus{
    outline: none;
}

为了可用性，您可能需要添加一些其他方式让用户知道哪个元素具有键盘焦点。

Chrome 还将突出显示其他元素，例如用作模式的 DIV。为了防止突出显示这些元素和所有其他元素，您可以执行以下操作：

*:focus {
    outline: none;
}

---

⚠️辅助功能警告

请注意，从输入中删除大纲是一种可访问性不好的做法。仅使用键盘的用户将无法看到他们所关注的元素。更多信息请访问 a11yproject

Answer 2

当前答案对 Bootstrap 3.1.1 不起作用。这是我必须重写的内容：

.form-control:focus {
  border-color: inherit;
  -webkit-box-shadow: none;
  box-shadow: none;
}

Answer 3

input:focus {
    outline:none;
}

这样就可以了。橙色轮廓将不再显示。

Answer 4

<input style="border:none" >

对我来说效果很好。希望将其固定在 html 本身中...:)

Answer 5

我找到了解决方案。
我在 CSS 中使用了：

outline:none;

，它似乎有效。不管怎样，谢谢你的帮助。 :)

Answer 6

这会从所有元素和任何元素中删除铬中的橙色框架，无论它是什么以及在哪里

*:focus {
    outline: none;
}

Answer 7

解决方案

*:focus {
    outline: 0;
}

PS：在焦点上使用

outline:0

代替

outline:none

。这是有效且更好的做法。

Answer 8

请使用以下语法去除文本框边框和浏览器样式的高亮边框。

input {
    background-color:transparent;
    border: 0px solid;
    height:30px;
    width:260px;
}
input:focus {
    outline:none;
}

Answer 9

设置

input:focus{
    outline: 0 none;
}

“！重要”是为了以防万一。那没有必要。 [现在它消失了。 –编者。]

Answer 10

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

*:focus {
    outline: none;
}

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

input:focus {
   outline:none;
}

Answer 11

我发现你还可以使用：

input:focus{
   border: transparent;
}