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

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

对于我正在工作的布局，这是分散注意力，看起来不正确。

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

Firefox似乎没有这样做，或者至少，会让我控制它:

border: x;

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

让Safari删除这一点闪光会很好。

当前回答

从所有输入中删除它

input {
 outline:none;
}

其他回答

焦点上的文本区域可能有框影..可以像这样删除:

textarea:focus{
    outline: none!important;
    box-shadow: none!important;
}

这是一个旧线程，但作为参考，重要的是要注意，不建议禁用输入元素的大纲，因为它阻碍了可访问性。

outline属性的存在是有原因的——为用户提供一个清晰的键盘焦点指示。有关该主题的进一步阅读和其他来源，请参阅http://outlinenone.com/

试试这个css，它为我工作

textarea:focus, input:focus{ border: none; }

我尝试了所有的答案，我仍然不能让我的工作在移动，直到我找到-webkit-tap-highlight-color。

所以，对我有用的是……

* { -webkit-tap-highlight-color: transparent; }

你可以使用CSS来禁用它! 这是我用来禁用蓝色边框的代码:

*:focus {
    outline: none;
}

这是一个实际的例子

推荐文章