自定义ion-checkbox默认背景颜色

Question

离子复选框很棒，但我不知道如何自定义复选框的背景颜色，而不是默认的白色？我知道如何自定义选中复选框时显示的复选框颜色，而不是未选中的颜色。

Answer 1

我是这样做的：

.checkbox input:checked:before, .checkbox input:checked + .checkbox-icon:before {
  background: red !important; 
  border-color: red !important;
}

Answer 2

您应该为复选框类添加覆盖css样式：

.ionic .checkbox input:before, 
.ionic .checkbox-icon:before {
  background: #333;    /* use your color hex instead of #333 */
  border-color: #333;
}

和活跃状态：

.ionic .checkbox input:checked:before, 
.ionic .checkbox input:checked + .checkbox-icon:before {
  background: #333;
}

我建议添加父主题类，这样就不会改变其复选框的颜色：

.ionic .my-checkbox-class .checkbox input:before, 
.ionic .my-checkbox-class .checkbox-icon:before

.ionic .my-checkbox-class .checkbox input:checked:before, 
.ionic .my-checkbox-class .checkbox input:checked + .checkbox-icon:before {

并像这样使用它：

<li class="item item-checkbox my-checkbox-class">
 <label class="checkbox">
   <input type="checkbox">
 </label>
 Flux Capacitor
</li>

Answer 3

使用离子色，例如：

<li class="item item-checkbox my-checkbox-class">
 <label class="checkbox checkbox-balanced">
   <input type="checkbox">
 </label>
 Flux Capacitor
</li>