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

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

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

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

border: x;

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

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


当前回答

我尝试了所有的答案,我仍然不能让我的工作在移动,直到我找到-webkit-tap-highlight-color。

所以,对我有用的是……

* { -webkit-tap-highlight-color: transparent; }

其他回答

你实际上不应该使用outline: none,因为如果有人使用高对比度视图,那么他们将无法在黑暗背景上看到状态的变化。相反,你应该使用:

边框色:透明;

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

解决方案是:

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

在Firefox中,没有一个解决方案对我有效。

下面的解决方案更改了Firefox的焦点边框样式,并将其他浏览器的大纲设置为none。

我已经有效地使焦点边界从3px的蓝色发光到与文本区域边界匹配的边界样式。下面是一些边框样式:

虚线边界(边界2px红色虚线):

没有边界!(边境0 px):

Textarea border(边框1px纯灰色):

代码如下: 输入:焦点,textarea:焦点{ 大纲:没有;/**对于Safari, etc **/ 边框:1px纯灰色;/** For Firefox **/ } #{文本区域 位置:绝对的; 上图:10 px; 左:10 px; 右:10 px; 宽度:calc(100% - 20px); 身高:160 px; 显示:inline-block; margin-top: -0.2 em; } < textarea id = " textarea”>哟textarea > < /

试试这个:

*:focus {
    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;
}