html - Bootstrap 4 : customize checkbox border

Question

我正在尝试自定义复选框的颜色。我按照文档进行操作，想出了一种更改背景的方法:

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

如果您单击该复选框，还会有一个蓝色边框(我认为)框本身周围有一个填充，但即使进行了一些研究，我也无法找到如何更改该边框的颜色。任何人都可以帮助我吗？我做了一个fiddle展示我所拥有的。

有人知道如何更改该边框吗？

提前致谢!

Answer 1

Bootstrap 4 使用 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;
}

圆 Angular 边框用border-radius定义:

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