Bootstrap 4:自定义复选框边框

Question

我正在尝试自定义复选框的颜色.我按照文档,然后想出了一种改变背景的方法:

.custom-control-input:checked ~ .custom-control-indicator {
        background-color: #ffa500;
}

如果你单击复选框,还有一个蓝色边框(我认为)在盒子周围填充,但即使进行了一些研究,我也无法找到如何更改该边框的颜色.有人可以帮帮我吗？我做了一个小提琴来展示我拥有的东西.

有谁知道如何改变边界？

提前致谢!

Answer 1

Bootstrap 4使用a box-shadow来获得这种效果:

.custom-control-input:focus~.custom-control-indicator {
    -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 3px #0275d8;
    box-shadow: 0 0 0 1px #fff, 0 0 0 3px #0275d8;
}

圆角边框定义为border-radius:

.custom-checkbox .custom-control-indicator {
    border-radius: .25rem;
}

Answer 2

要在Bootstrap v4.0.0中删除蓝色边框并将活动状态背景重置为#fff，请使用：

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: none;
}
.custom-control-input:active ~ .custom-control-label::before {
    background-color: #fff;
}