自定義離子複選框的默認背景顏色

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; 
}