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


当前回答

为什么不直接使用呢?

 input:focus{
        outline-color : #7a0ac5;
    }

其他回答

最后,我在bootstrap.css中修改了以下css条目

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {   
  border-color: rgba(126, 239, 104, 0.8);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(126, 239, 104, 0.6);
  outline: 0 none;
}

如果您正在使用Bootstrap 3。X,你现在可以用新的@input-border-focus变量改变颜色。

有关更多信息和警告,请参阅commit。

在_variables。SCSS更新@input-border-focus。

要修改这个辉光的大小/其他部分,请修改mixins/_forms.scss

@mixin form-control-focus($color: $input-border-focus) {
  $color-rgba: rgba(red($color), green($color), blue($color), .6);
  &:focus {
    border-color: $color;
    outline: 0;
    @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 4px $color-rgba);
  }
}

对于焦点前的输入边框。你可以指定你想要使用的最喜欢的颜色和其他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属性。

根据@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;