当一个HTML元素被“聚焦”(当前选中/标签进入),许多浏览器(至少Safari和Chrome)会在它周围放一个蓝色边框。

对于我正在工作的布局,这是分散注意力,看起来不正确。

<input type="text" name="user" class="middle" id="user" tabindex="1" />

Firefox似乎没有这样做,或者至少,会让我控制它:

border: x;

如果有人能告诉我IE的表现如何,我会很好奇。

让Safari删除这一点闪光会很好。


当前回答

从所有输入中删除它

input {
 outline:none;
}

其他回答

在你这样做之前,请记住焦点轮廓是一个可访问性和可用性特性;它提示用户当前关注的元素是什么,许多用户依赖于它。你需要找到其他方法让焦点可见。

在你的情况下,试试:

input.middle:focus {
    outline-width: 0;
}

或者一般来说,影响所有基本的形式元素:

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

在评论中,Noah Whitmore建议进一步支持将contentteditable属性设置为true的元素(有效地使它们成为一种输入元素)。以下也应该针对这些(在支持CSS3的浏览器中):

[contenteditable="true"]:focus {
    outline: none;
}

虽然我不建议这样做,但为了完整性,你可以这样禁用所有的焦点轮廓:

*:focus {
    outline: none;
}

这是唯一对我有效的办法

边界实际上是一个影子。所以为了隐藏它,我不得不这样做:

input[type="text"]:focus{
     box-shadow: 0 0 0 rgb(255, 255, 255);
}

 input[type="checkbox"]:focus{
      box-shadow: 0 0 0 rgb(255, 255, 255);
 }

你也可以试试这个

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

or

.classname input{
outline-style: none;
}

: 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

试试这个css,它为我工作

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