Bootstrap 4复选框通过背景颜色更改来更改大小

Question

当我更改复选框的背景时，检查图标的大小也会因某种原因调整大小。我怎么能阻止这种情况发生？

看看我的代码，看看我的意思：

.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

使用简写属性background，您将覆盖所有background-*属性，由Bootstrap 4设置。我认为您只想更改background-color属性，因此您可以使用以下解决方案：

解决方案使用Bootstrap 4（alpha） - 原始答案：

.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>

解决方案使用Bootstrap 4（稳定 - 不是alpha或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>

使用background速记属性发生了什么？

只使用background属性，您将覆盖以下CSS规则：

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

Answer 2

代替：

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

做：

.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>