改变引导输入焦点蓝色发光

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

当前回答

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

2013-09-06 17:13:54

其他回答

你可以使用.form-control选择器来匹配所有输入。例如改为红色:

.form-control:focus {
  border-color: #FF0000;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6);
}

把它放在你的自定义css文件中，并在bootstrap.css之后加载它。它将适用于所有输入，包括文本区域，选择等…

2015-01-05 11:40:54

为body标签添加一个Id。在你自己的Css(不是bootstrap.css)中指向新的body ID，并设置你想要覆盖的类或标记以及新的属性。现在您可以随时更新引导，而不会丢失您的更改。

html文件:

  <body id="bootstrap-overrides">

css文件:

#bootstrap-overrides input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="url"]:focus, textarea:focus{
  border-color: red;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(126, 239, 104, 0.6);
  outline: 0 none;
}

请参见:覆盖引导css的最佳方法

2016-03-30 14:00:26

在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变量来控制阴影宽度。

2018-04-12 07:53:02

对于Bootstrap v4.0.0 beta版本，你需要将以下内容添加到覆盖Bootstrap的样式表中(可以在CDN/local链接后添加到Bootstrap v4.0.0 beta版，也可以在样式中添加!

.form-control:focus {
  border-color: #6265e4 !important;
  box-shadow: 0 0 5px rgba(98, 101, 228, 1) !important;
}

将box-shadow上的border-color和rgba替换为你想要的颜色样式*。

2018-01-02 18:39:54

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

input, textarea, button {outline: none; }

2015-09-28 15:51:50

改变引导输入焦点蓝色发光

推荐文章

最新文章

标签