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

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

当前回答

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

2013-02-11 23:30:22

其他回答

实际上，在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属性。

2017-10-15 02:04:00

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

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

2020-05-08 11:22:01

你可以这样修改.form-control:focus颜色而不改变引导样式:

快速修复

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

完整的解释

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 Search for the class you want to modify. E.g. .form-control:focus and copy the parameters that you want to modify into your css. In this case is border-color and box-shadow. Choose a color for the border-color. In this case I choose to pick up the same green the bootstrap uses for their .btn-success class, by searching for that particular class in the bootstrap.css page mentioned in the step 1. Convert the color you have picked to RGB and add that to the box-shadow parameter without altering the fourth RGBA parameter (0.25) that bootstrap has for transparency.

2019-02-28 12:19:08

为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

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

推荐文章

最新文章

标签