Bootstrap 4: customize checkbox border
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;
}
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;
}