更改Bootstrap输入焦点蓝色发光

Answers:

223

最后，我在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;
}
— felix001
source
3
我遇到了定位input[type] {}
— Morpheus，
2
Bootstrap 3.x不再需要此功能。请参阅我的答案以获取更多信息。
— Nate T
@Cricket Boostrap定制程序当前不提供此变量：(
— Caumons
2
@Caumons现在。我建议使用@input-border-focus而不是此答案。
— Nate T
4
您忘记了select
— David Morrow 2014年
169

您可以使用.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之后加载。它将应用于所有输入，包括文本区域，选择等...

— igaster
source
这不是OP想要的。他在问如何改变光彩，而不是边界
— 凯文·马丁·何塞
8
@lonesword是正确的，实际上您必须同时更改border-color和shadow-color。我已经更新了答案
— igaster
2
这比@ felix001的解决方案干净得多，并且可以工作
— dspacejs 2016年
58

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

查看提交更多信息和警告，。

在_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);
  }
}
— 内特
source
4
您是否有一个完成或执行此操作的示例？在此先感谢
— Seany84
2
您需要使用Bootstrap样式表的Less或Sass版本。然后，在导入Bootstrap样式表之前设置您的自定义变量，它将覆盖Bootstrap的默认设置。您将需要预编译样式表或使用Sprockets之类的东西。
— Nate T
您还可以利用官方引导站点对较少的变量进行自定义更改：getbootstrap.com/customize
— red_trumpet 2014年
1
很好，但这显然不适用于按钮和其他链接，仅适用于输入和文本区域。对于按钮，例如，您仍然需要用覆盖.btn:focus { outline: none; }。
— zok 2014年
此答案确实适用于使用SASS / SCSS的用户。@ input-order-focus在中_variables.scss。
— TyMayn 2015年
30

在此处输入图片说明 在此处输入图片说明

您可以通过以下方式修改.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-color和box-shadow。
  3. 选择一种颜色border-color。在这种情况下，我选择.btn-success在步骤1中提到的bootstrap.css页面中搜索特定的类，从而选择引导程序用于其类的绿色。
  4. 将您选择的颜色转换为RGB并将其添加到box-shadow参数中，而无需更改引导程序为透明而设置的第四个RGBA参数（0.25）。
— dcx86
source
1
太好了，它简单又有效，我也需要绿色:)
— alfian5229 '19
13

对于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 *。

12

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

— 瓦辛格
source
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;
}
— 农民
source
1
如何禁用铬黄色轮廓？
— 罗伊·李
实际上，请不要禁用所有：focus轮廓（如我上面建议的那样）。仅键盘用户可访问性令人恐惧。您可以如上所述禁用平台默认值，并添加适当的访问outline: dotted thin black;
— 权限
8

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

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

这是显示效果的屏幕截图：之前和之后： 在此处输入图片说明 在此处输入图片说明

— 拉杜
source
这对我有用。但是我还必须添加边框颜色，因为它会使它保持蓝色。
— 雷切尔·S
6

我进入此线程，以寻找完全禁用发光的方法。出于我的目的，许多答案过于复杂。为了简单的解决方案，我只需要如下一行CSS。

input, textarea, button {outline: none; }
— 马萨尼西
source
2
我认为您可能也需要box-shadow: none;。
— silverliebt
2
它对我有用，但是我必须!important在box-shadow@silverliebt 的建议之后添加
— Jefrey Sobreira Santos
5

将一个ID添加到body标签。在您自己的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;
}

另请参阅：覆盖引导CSS的最佳方法

— 自由职业者
source
5

实际上，在Bootstrap 4.0.0-Beta（截至2017年10月）中，input [type =“ text”]并未引用输入元素，输入元素的所有Bootstrap 4属性实际上都是基于表单的。

因此，它使用.form-control：focus样式。下面是用于突出显示输入元素的适当代码：

.form-control:focus {
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  outline: none;
}

相当容易实现，只需更改border-color属性即可。

— 思维团队
source
或者，如果使用scss，只需为bootstrap 4.0.0-Beta覆盖$ input-focus-border-color变量
— Zuhaib Ali，2010年
我认为您也需要添加此内容box-shadow: xpx ypx #80bdff;
1

在Bootstrap 3.3.7中，您可以在定制程序的“表单”部分中更改@ input-border-focus值： 在此处输入图片说明

— 史蒂夫
source
1

在以上@wasinger的回复的基础上，在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;
— 古尔文
source
0

我无法使用CSS解决此问题。引导后，即使我按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开发者工具拍摄的前后照片。注意聚焦和聚焦之间边框颜色的不同。顺便说一句，这不适用于按钮。带按钮。使用按钮，您必须将大纲属性更改为无。

在此处输入图片说明

在此处输入图片说明

— 担
source
0

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


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

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


.input:focus{
    box-shadow: none;
    border-color: none;
    outline: lightgreen auto 5px ;
}
— 萨钦
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.