当一个HTML元素被“聚焦”(当前选中/标签进入)，许多浏览器(至少Safari和Chrome)会在它周围放一个蓝色边框。
对于我正在工作的布局，这是分散注意力，看起来不正确。
<input type="text" name="user" class="middle" id="user" tabindex="1" />
Firefox似乎没有这样做，或者至少，会让我控制它:
border: x;
如果有人能告诉我IE的表现如何，我会很好奇。
让Safari删除这一点闪光会很好。
当前回答
你实际上不应该使用outline: none，因为如果有人使用高对比度视图，那么他们将无法在黑暗背景上看到状态的变化。相反，你应该使用:
边框色:透明;
其他回答
这是唯一对我有效的办法
边界实际上是一个影子。所以为了隐藏它，我不得不这样做:
input[type="text"]:focus{
box-shadow: 0 0 0 rgb(255, 255, 255);
}
input[type="checkbox"]:focus{
box-shadow: 0 0 0 rgb(255, 255, 255);
}
你也可以试试这个
input[type="text"] {
outline-style: none;
}
or
.classname input{
outline-style: none;
}
从所有输入中删除它
input {
outline:none;
}
你可以使用CSS来禁用它! 这是我用来禁用蓝色边框的代码:
*:focus {
outline: none;
}
这是一个实际的例子
在Firefox中，没有一个解决方案对我有效。
下面的解决方案更改了Firefox的焦点边框样式，并将其他浏览器的大纲设置为none。
我已经有效地使焦点边界从3px的蓝色发光到与文本区域边界匹配的边界样式。下面是一些边框样式:
虚线边界(边界2px红色虚线):
没有边界!(边境0 px):
Textarea border(边框1px纯灰色):
代码如下: 输入:焦点，textarea:焦点{ 大纲:没有;/**对于Safari, etc **/ 边框:1px纯灰色;/** For Firefox **/ ｝ #{文本区域 位置:绝对的; 上图:10 px; 左:10 px; 右:10 px; 宽度:calc(100% - 20px); 身高:160 px; 显示:inline-block; margin-top: -0.2 em; ｝ < textarea id = " textarea”>哟textarea > < /
