Настроить ион-флажок по умолчанию background-color

Question

ion-checkbox отлично, но я не знаю, как я могу настроить фоновый цвет этого флажка, чтобы быть чем-то иным, чем белый по умолчанию? Я знаю, как настроить цвет флажка, который отображается, когда флажок установлен, но не неконтролируемый цвет.

Answer 1

Вы должны добавить стиль переопределения CSS для CheckBox класса:

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

Я бы рекомендовал добавить родительский класс темы, чтобы не изменить цвет из Ther флажков:

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