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

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

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

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

border: x;

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

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


当前回答

当焦点在元素上时,使用下面的CSS属性删除轮廓:

input:focus {
    outline: 0;
}

这个CSS属性删除焦点上所有输入字段的轮廓,或者使用伪类使用下面的CSS属性删除元素的轮廓。

.className input:focus {
    outline: 0;
} 

此属性删除所选元素的轮廓。

其他回答

你也可以试试这个

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

在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>

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

*:focus {
    outline: none;
}

这是一个实际的例子

当焦点在元素上时,使用下面的CSS属性删除轮廓:

input:focus {
    outline: 0;
}

这个CSS属性删除焦点上所有输入字段的轮廓,或者使用伪类使用下面的CSS属性删除元素的轮廓。

.className input:focus {
    outline: 0;
} 

此属性删除所选元素的轮廓。