更改Bootstrap输入焦点蓝色发光
Ric*_*ckD 175 html css twitter-bootstrap
有谁知道如何改变Bootstrap的input:focus？点击input字段时出现的蓝色光芒？
Ric*_*ckD 205
最后,我在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;
}
- 我遇到了针对`input [type] {}`的问题 (3认同)
- 你忘记了```select``` (3认同)
- Bootstrap 3.x不再需要这个.有关详细信息,请参阅我的回答 (2认同)
- @Caumons现在是.我建议使用`@ input-border-focus`而不是这个答案. (2认同)
iga*_*ter 161
您可以使用.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等...
- @lonesword是对的,事实上你必须改变边框颜色和阴影颜色.我已经更新了答案 (7认同)
- 这比@ felix001的解决方案干净得多，并且可以工作 (2认同)
- 这也适用于Bootstrap 4 (2认同)
Nat*_*e T 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);
}
}
- 你有一个如何完成或做到这一点的例子吗？提前致谢 (4认同)
- 您需要使用Bootstrap样式表的Less或[Sass](https://github.com/twbs/bootstrap-sass)版本.然后,在导入Bootstrap样式表之前设置自定义变量,它将覆盖Bootstrap默认值.您需要预编译样式表或使用[Sprockets](https://github.com/sstephenson/sprockets)之类的东西. (2认同)
dcx*_*x86 17
您可以通过以下方式修改.form-control:focus 颜色而无需更改引导样式：
快速解决
.form-control:focus {
border-color: #28a745;
box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}
完整说明
- 找到您正在使用的bootstrapCDN版本。例如对于我来说现在是4.3.1：https : //maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css
- 搜索您要修改的类。例如
.form-control:focus，将要修改的参数复制到CSS中。在这种情况下是border-color和box-shadow。 - 选择一种颜色
border-color。在这种情况下，我选择.btn-success在步骤1中提到的bootstrap.css页面中搜索特定的类，从而选择引导程序用于其类的绿色。 - 将您选择的颜色转换为RGB并将其添加到
box-shadow参数中，而无需更改引导程序为透明而设置的第四个RGBA参数（0.25）。
小智 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替换为你喜欢的颜色样式*.
pea*_*ter 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;
}
- @Roylee你有没有用`outline:none;`来尝试上面的内容 (4认同)
was*_*ger 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变量控制阴影宽度.
要禁用蓝光(但您可以修改代码以更改颜色,大小等),请将其添加到您的css:
.search-form input[type="search"] {
-webkit-box-shadow: none;
outline: -webkit-focus-ring-color auto 0px;
}
这是一个显示效果的屏幕截图:之前和之后:
我登陆这个线程寻找完全禁用发光的方法.为了我的目的,许多答案都过于复杂.为了便于解决,我只需要一行CSS,如下所示.
input, textarea, button {outline: none; }
- 我认为您可能还需要`box-shadow：none;`。 (2认同)
- 它对我有用，但是我必须在@silverliebt建议的`box-shadow`之后添加`！important`。 (2认同)
小智 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;
}
另请参阅:覆盖bootstrap css的最佳方法
实际上,在Bootstrap 4.0.0-Beta(截至2017年10月)输入元素未被input [type ="text"]引用,输入元素的所有Bootstrap 4属性实际上都是基于表单的.
所以它使用.form-control:焦点样式.输入元素的"焦点上"突出显示的适当代码如下:
.form-control:focus {
color: #495057;
background-color: #fff;
border-color: #80bdff;
outline: none;
}
很容易实现,只需更改border-color属性即可.
简单的
要删除它：
.form-control, .btn {
box-shadow: none !important;
outline: none !important;
}
改变它
.form-control, .btn {
box-shadow: new-value !important;
outline: new-value !important;
}