Bootstrap Switch Size and Color


#1

Does anyone know how to change the size and color or the Bootstrap 4 “Switch” control?


#2

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

#3

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

#4

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.