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

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

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

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

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

border: x;

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

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

当前回答

你实际上不应该使用outline: none，因为如果有人使用高对比度视图，那么他们将无法在黑暗背景上看到状态的变化。相反，你应该使用:

边框色:透明;

其他回答

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

*:focus {
    outline: none;
}

这是一个实际的例子

如果上面的解决方案不起作用，你可能正在使用bootstrap，因此.form-control类在默认情况下将box-shadow css属性应用到输入字段。

解决方案是:

.form-control {
    box-shadow: none;
}

使用以下代码:

input:focus {
    outline: 0;
}

你实际上不应该使用outline: none，因为如果有人使用高对比度视图，那么他们将无法在黑暗背景上看到状态的变化。相反，你应该使用:

边框色:透明;

您可以使用:outline:none删除文本/输入框周围的橙色或蓝色边框(outline)

input {
    background-color: transparent;
    border: 0px solid;
    height: 20px;
    width: 160px;
    color: #CCC;
    outline:none !important;
}

推荐文章