Bootstrap 4: customize checkbox border

Question

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?

Thanks in advance!

Answer 1

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

The rounded border is defined with border-radius:

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

Answer 2

To remove the blue border and reset active state background to #fff in Bootstrap v4.0.0 use:

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