: focus-visible

对可访问性的好消息- Chrome和Firefox增加了对 : focus-visible。

隐藏焦点样式是不好的做法，因为可访问性要求(键盘导航)会使你的网站更不容易访问。

使用:focus-visible伪类，并让浏览器决定何时应用焦点。

:focus-visible /* Chrome */

注意，Firefox通过一个旧的带前缀的伪类来支持类似的功能:

:-moz-focusring /* Firefox */

button { color: #000; background-color: #fff; padding: 10px 16px; margin: 10px 0; border-radius: 4px; } button:focus { box-shadow: 0 0 0 2px #E59700; outline: 0; } button:hover { background-color: #eee; } button.with-focus-visible:focus:not(:focus-visible) { box-shadow: none; outline: 0; } button.with-focus-visible:focus-visible, button.with-focus-visible:moz-focusring { box-shadow: 0 0 0 2px #E59700; outline: 0; } <p>Click on the button using a mouse. Then try tabbing to the button.</p> <button>without :focus-visible</button> <button class="with-focus-visible">with :focus-visible</button>

文档:https://developer.mozilla.org/en-US/docs/Web/CSS/: focus-visible

w3规格:https://www.w3.org/TR/selectors-4/#the-focus-visible-pseudo

从所有输入中删除它

input {
 outline:none;
}

当焦点在元素上时，使用下面的CSS属性删除轮廓:

input:focus {
    outline: 0;
}

这个CSS属性删除焦点上所有输入字段的轮廓，或者使用伪类使用下面的CSS属性删除元素的轮廓。

.className input:focus {
    outline: 0;
} 

此属性删除所选元素的轮廓。

如果上面的解决方案不起作用，你可能正在使用bootstrap，因此.form-control类在默认情况下将box-shadow css属性应用到输入字段。

解决方案是:

.form-control {
    box-shadow: none;
}

这让我困惑了一段时间，直到我发现这条线既不是边界也不是轮廓，它是阴影。所以要移除它，我必须使用这个:

input:focus, input.form-control:focus {

    outline:none !important;
    outline-width: 0 !important;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}

你也可以试试这个

input[type="text"] {
outline-style: none;
}

or

.classname input{
outline-style: none;
}