Clever Geek Handbook

Bootstrap 4: customize checkbox frame

I am 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 check the box, a blue border appears with (I think) padding around the window itself, but even with some research I can't seem to find how to change the color of that border. Can anyone help me? I made a fiddle to demonstrate what I have.

Does anyone know how to change this border?

Thanks in advance!

+3


source to share


2 answers


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


A rounded border is defined with border-radius

:

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


source


To remove the blue border and reset the 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;
}
0


source






More articles:


All Articles