Does anyone know how to change the size and color or the Bootstrap 4 “Switch” control?
For the checked state I am using the following code in project css to change the color and remove the ‘glow’. Cannot find anything that alters the unchecked state though
.custom-control-input:checked~.custom-control-label::before {
color: #fff;
background-color: steelblue;
outline: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
To be fair, the Bootstrap 3 Fliptoggle also has no color if it is not checked.
Can I suggest an improvement? The border should be the same color as the checkbox:
.custom-control-input:checked~.custom-control-label::before {
color: #fff;
background-color: red;
border-color:red;
outline: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
Thanks. I had tried to change the border color but must have used the wrong statement.
I was not trying to change the color of the unchecked state but I wanted to remove the focus glow. I have scaled the control up by 1.5x and the width of the glow gets scaled also. It looks a bit ‘strange’ to me like this. I could not get ‘custom-control-input:unchecked…’ to work.