有人知道如何改变Bootstrap的输入:焦点吗?当你点击输入字段时显示的蓝色辉光?
当前回答
在Bootstrap 3.3.7中，你可以在定制器的Forms部分更改@input-border-focus值:
其他回答
如果您正在使用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);
}
}
为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的最佳方法
简单的一个
要移除它:
.form-control, .btn {
box-shadow: none !important;
outline: none !important;
}
来改变它
.form-control, .btn {
box-shadow: new-value !important;
outline: new-value !important;
}
要禁用蓝色辉光(但你可以修改代码来改变颜色，大小等)，添加这个到你的css:
.search-form input[type="search"] {
-webkit-box-shadow: none;
outline: -webkit-focus-ring-color auto 0px;
}
下面是一个屏幕截图，展示了之前和之后的效果:
为什么不直接使用呢?
input:focus{
outline-color : #7a0ac5;
}
