如何删除文本/输入框周围的焦点边框

一尘不染

javascript

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

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

带有蓝色轮廓的文本框和其中写有“示例”的文本框

阅读 166

2022-02-22

共1个答案

一尘不染

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

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

您可能希望添加一些其他方式让用户知道哪些元素具有键盘焦点，但出于可用性考虑。

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

*:focus {
    outline: none;
}

请注意，从输入中删除轮廓是一种可访问性不好的做法。使用屏幕阅读器的用户将无法看到他们的指针聚焦在哪里。更多信息在 a11yproject

2022-02-22