Bootstrap 4 checkbox changes size with background-color change

Question

When I change the background of my checkbox, the size of the check icon resizes too for some reason. How can I stop that from happening?

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

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

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>

solution 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 is happening using the background shorthand property?

By only using the background property you overwrite the following CSS rules:

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