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

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

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

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

border: x;

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

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


当前回答

这是一个旧线程,但作为参考,重要的是要注意,不建议禁用输入元素的大纲,因为它阻碍了可访问性。

outline属性的存在是有原因的——为用户提供一个清晰的键盘焦点指示。有关该主题的进一步阅读和其他来源,请参阅http://outlinenone.com/

其他回答

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

解决方案是:

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

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

input:focus {
    outline: 0;
}

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

.className input:focus {
    outline: 0;
} 

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

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

在你的情况下,试试:

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"] {
outline-style: none;
}

or

.classname input{
outline-style: none;
}

焦点上的文本区域可能有框影..可以像这样删除:

textarea:focus{
    outline: none!important;
    box-shadow: none!important;
}