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

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

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

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

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

border: x;

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

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

当前回答

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

所以，对我有用的是……

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

其他回答

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

解决方案是:

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

试试这个css，它为我工作

textarea:focus, input:focus{ border: 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;
}

.classname input{
outline-style: none;
}

试试这个:

*:focus {
    outline: none;
}

这将影响您的所有页面。

推荐文章