Bootstrap 4:自定义复选框边框 [英] Bootstrap 4: customize checkbox border

问题描述

我正在尝试自定义复选框的颜色.我遵循了文档，并提出了一种更改背景的方法:

I'm trying to customize the color of my checkboxes. I followed the documentation and I came up with a way to change the background:

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

如果单击复选框，则框本身周围也会有一个蓝色边框(我认为)，但是即使进行了一些研究，我也无法找到如何更改边框颜色的方法.有人可以帮助我吗?我做了一个小提琴来展示我的东西.

If you click the checkbox there is also a blue border with (I think) a padding around the box itself, but even with some research, I'm unable to find how to change the color of that border too. Anyone can help me? I made a fiddle to demonstrate what I have.

有人知道如何更改边框吗?

Anyone know how to change that border?

提前谢谢！

推荐答案

Bootstrap 4使用box-shadow来达到此效果:

Bootstrap 4 is using a box-shadow to get this effect:

.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;
}

这篇关于Bootstrap 4:自定义复选框边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！