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

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

---

在评论中，诺亚·惠特莫尔建议进一步支持具有contenteditable属性设置为true(有效地使它们成为一种输入元素)。以下内容也应针对这些内容(在支持CSS 3的浏览器中)：

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

虽然我不推荐它，但为了完整起见，您可以始终禁用一切因此：

*:focus {
    outline: none;}

请记住，Focus大纲是一个可访问性和可用性特性；它提示用户当前关注的是什么元素。

Answer 2

将其从所有输入中删除

input {
 outline:none;}