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


当前回答

这将工作100%使用这个:

.form-control, .form-control:focus{
   box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
   border: rgba(255, 255, 255, 0);
}

其他回答

最后,我在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 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属性。

如果您正在使用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);
  }
}

简单的一个

要移除它:

.form-control, .btn {
    box-shadow: none !important;
    outline: none !important;
}

来改变它

.form-control, .btn {
    box-shadow: new-value !important;
    outline: new-value !important;
}

在Bootstrap 4中,如果你自己编译SASS,你可以改变下面的变量来控制焦点阴影的样式:

$input-btn-focus-width:       .2rem !default;
$input-btn-focus-color:       rgba($component-active-bg, .25) !default;
$input-btn-focus-box-shadow:  0 0 0 $input-btn-focus-width $input-btn-focus-color !default;

注意:从Bootstrap 4.1开始,$input-btn-focus-color和$input-btn-focus-box-shadow变量只用于输入元素,而不是按钮。按钮的焦点阴影被硬编码为box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);,所以你只能通过$input-btn-focus-width变量来控制阴影宽度。