当一个HTML元素被“聚焦”(当前选中/标签进入)，许多浏览器(至少Safari和Chrome)会在它周围放一个蓝色边框。
对于我正在工作的布局，这是分散注意力，看起来不正确。
<input type="text" name="user" class="middle" id="user" tabindex="1" />
Firefox似乎没有这样做，或者至少，会让我控制它:
border: x;
如果有人能告诉我IE的表现如何，我会很好奇。
让Safari删除这一点闪光会很好。
当前回答
在Bootstrap 4中，您可以使用阴影-none来删除边界轮廓，它将删除焦点轮廓。
<div class="form-group">
<label for="exampleInputEmail1">Name</label>
<input type="text" class="form-control form-control shadow-none"
id="exampleInputEmail1"aria-describedby="emailHelp">
</div>
其他回答
在你这样做之前，请记住焦点轮廓是一个可访问性和可用性特性;它提示用户当前关注的元素是什么，许多用户依赖于它。你需要找到其他方法让焦点可见。
在你的情况下，试试:
input.middle:focus {
outline-width: 0;
}
或者一般来说，影响所有基本的形式元素:
input:focus,
select:focus,
textarea:focus,
button:focus {
outline: none;
}
在评论中，Noah Whitmore建议进一步支持将contentteditable属性设置为true的元素(有效地使它们成为一种输入元素)。以下也应该针对这些(在支持CSS3的浏览器中):
[contenteditable="true"]:focus {
outline: none;
}
虽然我不建议这样做，但为了完整性，你可以这样禁用所有的焦点轮廓:
*:focus {
outline: none;
}
当焦点在元素上时，使用下面的CSS属性删除轮廓:
input:focus {
outline: 0;
}
这个CSS属性删除焦点上所有输入字段的轮廓，或者使用伪类使用下面的CSS属性删除元素的轮廓。
.className input:focus {
outline: 0;
}
此属性删除所选元素的轮廓。
试试这个:
*:focus {
outline: none;
}
这将影响您的所有页面。
如果上面的解决方案不起作用，你可能正在使用bootstrap，因此.form-control类在默认情况下将box-shadow css属性应用到输入字段。
解决方案是:
.form-control {
box-shadow: none;
}
这让我困惑了一段时间，直到我发现这条线既不是边界也不是轮廓，它是阴影。所以要移除它，我必须使用这个:
input:focus, input.form-control:focus {
outline:none !important;
outline-width: 0 !important;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
