有人知道如何改变Bootstrap的输入:焦点吗?当你点击输入字段时显示的蓝色辉光?
当前回答
简单的一个
要移除它:
.form-control, .btn {
box-shadow: none !important;
outline: none !important;
}
来改变它
.form-control, .btn {
box-shadow: new-value !important;
outline: new-value !important;
}
其他回答
根据@wasinger上面的回复,在Bootstrap 4.5中,我不仅要覆盖颜色变量,还要覆盖盒影本身。
$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;
你可以这样修改.form-control:focus颜色而不改变引导样式:
快速修复
.form-control:focus {
border-color: #28a745;
box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}
完整的解释
Find the bootstrapCDN version that you are using. E.g. for me right now is 4.3.1: https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css Search for the class you want to modify. E.g. .form-control:focus and copy the parameters that you want to modify into your css. In this case is border-color and box-shadow. Choose a color for the border-color. In this case I choose to pick up the same green the bootstrap uses for their .btn-success class, by searching for that particular class in the bootstrap.css page mentioned in the step 1. Convert the color you have picked to RGB and add that to the box-shadow parameter without altering the fourth RGBA parameter (0.25) that bootstrap has for transparency.
我不能解决这个与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值:
我降落到这个线程寻找方法禁用辉光完全。许多答案对我来说太复杂了。为了简单的解决方案,我只需要一行CSS如下。
input, textarea, button {outline: none; }