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

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

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

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

border: x;

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

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


当前回答

你也可以试试这个

input[type="text"] {
outline-style: none;
}

or

.classname input{
outline-style: none;
}

其他回答

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

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

这是唯一对我有效的办法

边界实际上是一个影子。所以为了隐藏它,我不得不这样做:

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);
 }

如果上面的解决方案不起作用,你可能正在使用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;
}

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

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