Html 更改 Bootstrap 输入焦点蓝色发光

Change Bootstrap input focus blue glow

提问by felix001

Does anyone know the how to change Bootstrap's input:focus? The blue glow that shows up when you click on an inputfield?

有谁知道如何更改 Bootstrap 的input:focus？单击input字段时出现的蓝色光芒？

回答by felix001

In the end I changed the following css entry in bootstrap.css

最后我在 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;
}

回答by igaster

You can use the .form-controlselector to match all inputs. For example to change to red:

您可以使用.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);
}

Put it in your custom css file and load it after bootstrap.css. It will apply to all inputs including textarea, select etc...

将它放在您的自定义 css 文件中并在 bootstrap.css 之后加载它。它将适用于所有输入，包括 textarea、select 等...

回答by Nate T

If you are using Bootstrap 3.x, you can now change the color with the new @input-border-focusvariable.

如果您使用的是 Bootstrap 3.x，您现在可以使用新@input-border-focus变量更改颜色。

See the commitfor more info and warnings.

有关更多信息和警告，请参阅提交。

In _variables.scssupdate @input-border-focus.

在_variables.scss更新中@input-border-focus。

To modify the size/other parts of this glow modify the mixins/_forms.scss

要修改此发光的大小/其他部分，请修改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);
  }
}

回答by dcx86

You can modify the .form-control:focuscolorwithout altering the bootstrap style in this way:

您可以通过以下方式修改.form-control:focus颜色而无需更改引导程序样式：

Quick fix

快速解决

.form-control:focus {
        border-color: #28a745;
        box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
    } 

Full explanation

完整说明

1. Find the bootstrapCDN version that you are using. E.g. for me right now is 4.3.1: https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css
2. Search for the class you want to modify. E.g. .form-control:focusand copy the parameters that you want to modify into your css. In this case is border-colorand box-shadow.
3. Choose a color for the border-color. In this case I choose to pick up the same green the bootstrap uses for their .btn-successclass, by searching for that particular class in the bootstrap.css page mentioned in the step 1.
4. Convert the color you have picked to RGB and add that to the box-shadowparameter without altering the fourth RGBA parameter (0.25) that bootstrap has for transparency.

1. 找到您正在使用的 bootstrapCDN 版本。例如对我来说现在是 4.3.1：https: //maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css
2. 搜索您要修改的课程。例如.form-control:focus，将您要修改的参数复制到您的 css 中。在这种情况下是border-color和box-shadow。
3. 为 选择一种颜色border-color。在这种情况下，我选择.btn-success通过在步骤 1 中提到的 bootstrap.css 页面中搜索该特定类来选择引导程序用于其类的相同绿色。
4. 将您选择的颜色转换为 RGB 并将其添加到box-shadow参数中，而无需更改 bootstrap 用于透明度的第四个 RGBA 参数 (0.25)。

回答by dcx86

For Bootstrap v4.0.0 beta release you will need the following added to a stylesheet that overrides Bootstrap (either add in after CDN/local link to bootstrap v4.0.0 beta or add !importantto the stylings:

对于 Bootstrap v4.0.0 beta 版本，您需要将以下内容添加到覆盖 Bootstrap 的样式表中（在 CDN/本地链接后添加到 bootstrap v4.0.0 beta 或添加!important到样式中：

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

Replace the border-color and the rgba on the box-shadow with which ever colour style you'd like*.

将 box-shadow 上的边框颜色和 rgba 替换为您喜欢的任何颜色样式*。

回答by peater

Here are the changes if you want Chrome to show the platform default "yellow" outline.

如果您希望 Chrome 显示平台默认的“黄色”轮廓，可以进行以下更改。

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: none;
    box-shadow: none;
    -webkit-box-shadow: none;
    outline: -webkit-focus-ring-color auto 5px;
}

回答by wasinger

In Bootstrap 4, if you compile SASS by yourself, you can change the following variables to control the styling of the focus shadow:

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

Note: as of Bootstrap 4.1, the $input-btn-focus-colorand $input-btn-focus-box-shadowvariables are used only for input elements, but not for buttons. The focus shadow for buttons is hardcoded as box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);, so you can only control the shadow width via the $input-btn-focus-widthvariable.

注意：从 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变量控制阴影宽度。

回答by radhoo

To disable the blue glow (but you can modify the code to change color, size, etc), add this to your css:

要禁用蓝色发光（但您可以修改代码以更改颜色、大小等），请将其添加到您的 css 中：

.search-form input[type="search"] {  
    -webkit-box-shadow: none;
    outline: -webkit-focus-ring-color auto 0px;
} 

Here's a screencapture showing the effect: before and after:

这是显示效果的屏幕截图：之前和之后：

回答by massanishi

I landed to this thread looking for the way to disable glow altogether. Many answers were overcomplicated for my purpose. For easy solution, I just needed one line of CSS as follows.

我登陆这个线程寻找完全禁用发光的方法。对于我的目的，许多答案过于复杂。为了简单的解决方案，我只需要一行 CSS，如下所示。

input, textarea, button {outline: none; }

回答by homefreelancer

Add an Id to the body tag. In your own Css (not the bootstrap.css) point to the new body ID and set the class or tag you want to override and the new properties. Now you can update bootstrap anytime without loosing your changes.

将 Id 添加到 body 标签。在您自己的 Css（不是 bootstrap.css）中指向新的主体 ID 并设置您想要覆盖的类或标签以及新属性。现在您可以随时更新引导程序而不会丢失您的更改。

html file:

html文件：

  <body id="bootstrap-overrides">

css file:

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

See also: best way to override bootstrap css

另请参阅：覆盖引导程序 css 的最佳方法