当一个 HTML 元素被 “聚焦”（当前被选中 / 插入）时，许多浏览器（至少是 Safari 和 Chrome）会在其周围放置一个蓝色边框。
对于我正在处理的布局，这会分散注意力，而且看起来不正确。
<input type="text" name="user" class="middle" id="user" tabindex="1" />Firefox 似乎没有这样做，或者至少可以让我通过以下方式控制它：
border: x;如果有人可以告诉我 IE 的性能，我会很好奇。
使 Safari 消除这点眩光会很好。
对于您的情况，请尝试：
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;
}请记住，焦点轮廓是可访问性和可用性功能；它会提示用户当前所关注的元素。
从所有输入中删除
input {
outline:none;
}这是一个旧线程，但是作为参考，必须注意，不建议禁用输入元素的轮廓，因为这会妨碍可访问性。
那里的 outline 属性是有原因的 - 为用户提供键盘焦点的清晰指示。有关此主题的更多信息和其他资源，请访问http://outlinenone.com/