有人知道如何改变Bootstrap的输入:焦点吗?当你点击输入字段时显示的蓝色辉光?
当前回答
这应该有助于去除它! 输入[type = text] { 边界:没有; } 输入[type = text]:focus { 边界:没有; 不必:没有; }
其他回答
我降落到这个线程寻找方法禁用辉光完全。许多答案对我来说太复杂了。为了简单的解决方案,我只需要一行CSS如下。
input, textarea, button {outline: none; }
要禁用蓝色辉光(但你可以修改代码来改变颜色,大小等),添加这个到你的css:
.search-form input[type="search"] {
-webkit-box-shadow: none;
outline: -webkit-focus-ring-color auto 0px;
}
下面是一个屏幕截图,展示了之前和之后的效果:
对于Bootstrap v4.0.0 beta版本,你需要将以下内容添加到覆盖Bootstrap的样式表中(可以在CDN/local链接后添加到Bootstrap v4.0.0 beta版,也可以在样式中添加!
.form-control:focus {
border-color: #6265e4 !important;
box-shadow: 0 0 5px rgba(98, 101, 228, 1) !important;
}
将box-shadow上的border-color和rgba替换为你想要的颜色样式*。
我不能解决这个与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。
这应该有助于去除它! 输入[type = text] { 边界:没有; } 输入[type = text]:focus { 边界:没有; 不必:没有; }