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

Question

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

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

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

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

 border: x;

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

让 Safari 移除这一点点耀斑会很好。

原文由 user170579 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 Cᴏʀʏ 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

从所有输入中删除它

input {
 outline:none;
}

原文由 marcjae 发布，翻译遵循 CC BY-SA 3.0 许可协议