有人知道如何改变Bootstrap的输入:焦点吗?当你点击输入字段时显示的蓝色辉光?
当前回答
简单的一个
要移除它:
.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;
}
下面是一个屏幕截图,展示了之前和之后的效果:
我不能解决这个与CSS。似乎bootstrap是得到最后的发言权,即使我有网站。css后bootstrap。无论如何,这对我很有用。
$(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开发工具之前和之后的照片。注意对焦和不对焦边界颜色的区别。另一方面,这对按钮不起作用。与按钮。与按钮,你必须改变轮廓属性为none。
在Bootstrap 3.3.7中,你可以在定制器的Forms部分更改@input-border-focus值:
在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如下。
input, textarea, button {outline: none; }