有人知道如何改变Bootstrap的输入:焦点吗?当你点击输入字段时显示的蓝色辉光?


当前回答

在Bootstrap 3.3.7中,你可以在定制器的Forms部分更改@input-border-focus值:

其他回答

我降落到这个线程寻找方法禁用辉光完全。许多答案对我来说太复杂了。为了简单的解决方案,我只需要一行CSS如下。

input, textarea, button {outline: none; }

对于焦点前的输入边框。你可以指定你想要使用的最喜欢的颜色和其他css,如填充等


.input {
    padding: 6px 190px 6px 15px;
    outline: #2a65ea auto 105px ;
}

当我们关注输入时。你可以指定你喜欢的颜色轮廓


.input:focus{
    box-shadow: none;
    border-color: none;
    outline: lightgreen auto 5px ;
}

实际上,在Bootstrap 4.0.0-Beta(截至2017年10月)中,input元素没有被input[type="text"]引用,输入元素的所有Bootstrap 4属性实际上都是基于表单的。

它使用。form-control:focus样式。用于突出显示输入元素的“on focus”的适当代码如下:

.form-control:focus {
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  outline: none;
}

很容易实现,只需要改变border-color属性。

如果你想完全移除阴影,添加类shadow-none到你的输入元素中。

根据@wasinger上面的回复,在Bootstrap 4.5中,我不仅要覆盖颜色变量,还要覆盖盒影本身。

$input-focus-width: .2rem !default;
$input-focus-color: rgba($YOUR_COLOR, .25) !default;
$input-focus-border-color: rgba($YOUR_COLOR, .5) !default;
$input-focus-box-shadow: 0 0 0 $input-focus-width $input-focus-color !default;