The Bootstrap 4 checkbox resizes with the background color changing

Question

When I change the background of my flag, the size of the check icon for some reason also changes. How can i stop this?

Take a look at my code and see what I mean:

.custom-checkbox .custom-control-indicator { border-radius: 50%; height: 25px; width: 25px; background-color: #fff; border: 1px solid #2c2b2c; } .custom-control-description { color: #2c2b2c; text-transform: uppercase; line-height: 2.7; font-size: 12px; } /* When I remove background the icon goes back to that default size */ .custom-control-input:checked~.custom-control-indicator { background: red; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> <div class="form-check"> <label class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input"> <span class="custom-control-indicator"></span> <span class="custom-control-description ml-4">Checkbox</span> </label> </div> <!-- /.form-check --> 

Answer 1

Using the shorthand property background you overwrite all the background-* properties set by Bootstrap 4. I think you only want to change the background-color property, so you can use the following solution:

using Bootstrap 4 (alpha) - original answer:

 .custom-checkbox .custom-control-indicator { background-color: #fff; border: 1px solid #2c2b2c; border-radius: 50%; height: 25px; width: 25px; } .custom-control-description { color: #2c2b2c; font-size: 12px; line-height: 2.7; text-transform: uppercase; } /* When I remove background the icon goes back to that default size */ .custom-control-input:checked ~ .custom-control-indicator { background-color: red !important; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> <div class="form-check"> <label class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input"> <span class="custom-control-indicator"></span> <span class="custom-control-description ml-4">Checkbox</span> </label> </div> 

using Bootstrap 4 (stable - not alpha or beta):

 .form-check .custom-control-label { color: #2c2b2c; font-size: 12px; line-height: 2.7; padding-left:15px; text-transform: uppercase; } .form-check .custom-control-label::after, .form-check .custom-control-label::before { height: 25px; width: 25px; } .form-check .custom-control-label::before { background-color: #fff; border: 1px solid #2c2b2c; border-radius: 50%; } /* When I remove background the icon goes back to that default size */ .custom-control-input:checked ~ .custom-control-label::before { background-color: red !important; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <div class="form-check"> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="customControlID"> <label class="custom-control-label" for="customControlID">Checkbox</label> </div> </div> 

What happens with the shorthand property of background ?

Using only the background property, you rewrite the following CSS rules:

 background-size: 50% 50%; background-repeat: no-repeat; background-position: center; 

Answer 2

Instead:

 .custom-control-input:checked~.custom-control-indicator {background: red;} 

make:

 .custom-control-input:checked~.custom-control-indicator {background-color: red;} 

Answer 3

 .custom-checkbox .custom-control-indicator { background-color: #fff; border: 1px solid #2c2b2c; border-radius: 50%; height: 25px; width: 25px; } .custom-control-description { color: #2c2b2c; font-size: 12px; line-height: 2.7; text-transform: uppercase; } /* When I remove background the icon goes back to that default size */ .custom-control-input:checked ~ .custom-control-indicator { background-color: red ; /* use this instead of background: red;*/ } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> <div class="form-check"> <label class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input"> <span class="custom-control-indicator"></span> <span class="custom-control-description ml-4">Checkbox</span> </label> </div>