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

Question

当一个HTML元素被“聚焦”（当前被选中/标签入）时，许多浏览器（至少是Safari和Chrome）会在其周围放置一个蓝色边框。

对于我正在处理的布局，这会分散注意力，看起来不正确。

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

Firefox似乎没有这样做，或者至少可以让我通过以下方式控制它：

border: x;

如果有人可以告诉我IE的性能，我会很好奇。

让Safari消除这点闪光会很好。

Answer 1

对于您的情况，请尝试：

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

或一般而言，影响所有基本表单元素：

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

在评论中，诺亚·惠特莫尔（Noah
Whitmore）
建议更进一步，以支持将contenteditable属性设置为的元素true（有效地使其成为一种输入元素）。以下内容也应该针对这些对象（在支持CSS3的浏览器中）：

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

尽管我不建议这样做，但出于完整性考虑，您始终可以使用以下命令禁用 所有内容 的焦点轮廓：

*:focus {
    outline: none;
}

请记住，焦点轮廓是可访问性和可用性功能；它会提示用户当前所关注的元素。