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

当一个html元素被"聚焦"(当前被选中/选中)时,许多浏览器(至少是Safari和Chrome)会在它周围放置一个蓝色边框.

对于我正在进行的布局,这会分散注意力并且看起来不正确.

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

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

  Click to see the input below to see the outline
  

input:focus, input.form-control:focus {

    outline:none !important;
    outline-width: 0 !important;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}