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

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