有人知道如何改变Bootstrap的输入:焦点吗?当你点击输入字段时显示的蓝色辉光?


当前回答

我不能解决这个与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。

其他回答

要禁用蓝色辉光(但你可以修改代码来改变颜色,大小等),添加这个到你的css:

.search-form input[type="search"] {  
    -webkit-box-shadow: none;
    outline: -webkit-focus-ring-color auto 0px;
} 

下面是一个屏幕截图,展示了之前和之后的效果:

在Bootstrap 3.3.7中,你可以在定制器的Forms部分更改@input-border-focus值:

我不能解决这个与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。

如果你想完全移除阴影,添加类shadow-none到你的输入元素中。

这应该有助于去除它! 输入[type = text] { 边界:没有; } 输入[type = text]:focus { 边界:没有; 不必:没有; }