更改Bootstrap输入焦点蓝色发光

时间:2013-02-11 21:13:23

标签: html css twitter-bootstrap

有谁知道如何更改Bootstrap的input:focus?单击input字段时显示的蓝色光芒?

19 个答案:

答案 0 :(得分:199)

最后我更改了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;
}

答案 1 :(得分:151)

您可以使用.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之后加载它。它适用于所有输入,包括textarea,select等...

答案 2 :(得分:58)

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

有关详细信息和警告,请参阅the 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);
  }
}

答案 3 :(得分:12)

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

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

答案 4 :(得分:11)

如果您希望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;
}

答案 5 :(得分:10)

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

答案 6 :(得分:9)

enter image description here enter image description here

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

快速修复

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

完整说明

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

答案 7 :(得分:5)

要禁用蓝色光晕(但您可以修改代码以更改颜色,大小等),请将其添加到您的CSS中:

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

这是一个显示效果的屏幕截图:之前和之后: enter image description here enter image description here

答案 8 :(得分:5)

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

input, textarea, button {outline: none; }

答案 9 :(得分:5)

在body标签中添加ID。在您自己的Css(而不是bootstrap.css)中指向新的正文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;
}

另请参阅:best way to override bootstrap css

答案 10 :(得分:5)

实际上,在Bootstrap 4.0.0-Beta(截至2017年10月)中,输入元素未被输入[type =&#34; text&#34;] 引用,所有输入元素的Bootstrap 4属性实际上是 form

所以它使用 .form-control:focus 样式。 &#34;焦点&#34;的适当代码突出显示输入元素如下:

m

非常容易实现,只需更改 border-color 属性。

答案 11 :(得分:3)

在以上@wasinger's reply的基础上,在 Bootstrap 4.5 中,我不仅要覆盖颜色变量,而且还要覆盖box-shadow本身。

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

答案 12 :(得分:1)

在Bootstrap 3.3.7中,您可以在自定义程序的“表单”部分中更改@ input-border-focus值: enter image description here

答案 13 :(得分:1)

对于焦点之前的输入边框。您可以指定要使用的最喜欢的颜色以及其他CSS(例如填充等)

def my_fun(row): 
    if df.loc[row,"Ac"] == df.loc[row,"At"]:
        df.loc[row,"Ac"] = 1
        df.loc[row,"At"] = 1
    elif df.loc[row,"Ac"] > df.loc[row,"At"]:
        df.loc[row,"Ac"] = 0
        df.loc[row,"At"] = 5
    else:
        df.loc[row,"Ac"] = 1
        df.loc[row,"At"] = 3

当我们专注于输入时。您可以指定自己喜欢的颜色轮廓


.input {
    padding: 6px 190px 6px 15px;
    outline: #2a65ea auto 105px ;
}

答案 14 :(得分:0)

我无法使用CSS解决此问题。即使我在bootstrap之后通过site.css进行访问,Boostrap似乎仍在说最后一句话。无论如何,这对我有用。

$(document).ready(function () {
    var elements = document.getElementsByClassName("form-control");

    Array.from(elements).forEach(function () {
        this.addEventListener("click", cbChange, false);
    })

    });

function cbChange(event) {
    var ele = event.target;
    var obj = document.getElementById(ele.id);
    obj.style.borderColor = "lightgrey";
}

后来我发现这可以在CSS中使用。显然只有表单控件

.form-control.focus, .form-control:focus {
    border-color: gainsboro;
} 

以下是Chrome开发者工具拍摄的照片。注意聚焦和聚焦之间边框颜色的不同。顺便说一句,这不适用于按钮。带按钮。使用按钮,您必须将大纲属性更改为无。

enter image description here

enter image description here

答案 15 :(得分:0)

为什么不只是使用?

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

答案 16 :(得分:0)

这将100%使用此功能:

let predicate = NSPredicate(format: "myRelationship == %@", selectedRecipe as CVarArg)

答案 17 :(得分:0)

简单的一个

要删除它:

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

要更改

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

答案 18 :(得分:0)

这应该有助于删除它!

input[type = text] {
  border: none;
}

input[type = text]:focus {
  border: none;
  box-shadow: none;
 }