自定义离子复选框的默认背景颜色

Question

离子复选框是伟大的，但我不知道如何自定义复选框的背景颜色是默认的白色以外的东西？我知道如何自定义勾选复选框时显示的复选框颜色，但不是未选中的颜色。

Answer 1

您应该添加一个覆盖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 2

使用离子颜色，例如：

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

Answer 3

我做了这样的：

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