如何删除输入文本元素上的边界突出显示

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

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

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

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

border: x;

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

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

当前回答

试试这个:

*:focus {
    outline: none;
}

这将影响您的所有页面。

其他回答

你可以使用CSS来禁用它! 这是我用来禁用蓝色边框的代码:

*:focus {
    outline: none;
}

这是一个实际的例子

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

边框色:透明;

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

input:focus {
    outline: 0;
}

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

.className input:focus {
    outline: 0;
}

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

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

所以，对我有用的是……

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

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

在你的情况下，试试:

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;
}

推荐文章