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

有人能解释一下如何删除文本/输入框周围的橙色或蓝色边框（轮廓）吗？我认为只有在Chrome上才会显示输入框处于活动状态。下面是我使用的输入CSS：

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

当前回答

<input style="border:none" >

对我来说效果很好。希望在html本身中修复它…：）

其他回答

Set

input:focus{
    outline: 0 none;
}

“！important”只是以防万一。这没有必要。[现在它消失了。–Ed.]

这将从所有元素和任何元素中移除橙色铬框，无论它在什么地方

*:focus {
    outline: none;
}

我发现你也可以使用：

input:focus{
   border: transparent;
}

此边框用于显示元素已聚焦（即，您可以键入输入或按Enter键）。您可以使用outline属性删除它，但是：

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

您可能想添加一些其他方式，让用户知道哪个元素具有键盘焦点，但为了便于使用。

Chrome还将对其他元素应用高亮显示，例如用作模态的DIV。为了防止这些元素和所有其他元素上的高亮显示，可以执行以下操作：

*:focus {
    outline: none;
}

⚠️ 可访问性警告

请注意，从输入中删除大纲是一种可访问性错误做法。使用屏幕阅读器的用户将无法看到指针的焦点。更多信息请访问a11yproject

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

*:focus {
    outline: none;
}

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

input:focus {
   outline:none;
}

推荐文章