Можно ли изменить цвет ионного радио, пока оно не проверено?

Question

это моя проблема, я хочу изменить предопределенный цвет (серый) на цвет, который я выбрал в качестве основного цвета.

Я только что попробовал, следующие способы:

<ion-col sizeXs="12" sizeMd="6" class="radio-box">
    <ion-item lines="none" class="radio-item">
        <ion-radio color="primary" mode="md" value="Lorem"></ion-radio>
        <ion-label>Lorem</ion-label>
    </ion-item>
</ion-col>

Также с css:

.radio-box {
    padding: 0 16px;
    margin: 8px 0;
    .radio-item {
        border: 1px solid #0064D9;
        border-radius: 5px;
        ion-radio:host{
            color: #0064D9!important;
        }
    }
}

более графическое c объяснение на всякий случай

Answer 1

В Ioni c 4+ вы можете использовать пользовательское свойство --color:

ion-radio {
  --color: #0064D9;
}

В Ioni c 3 вы можете установить border-color:

.radio-box ion-radio.radio-md .radio-icon {
  border-color: #0064D9;
} 

Answer 2

Вы можете сделать это непосредственно из селектора S CSS, добавив

.default .radio-item {
 // add the background color of your choice here
}

.default .radio-icon {
 // to add a default style color on the radio tick icon
}

, вы также можете использовать это для изменения дальнейшей покупки, используя

.selected .radio-icon {
 // to add a default style color on the radio tick icon
}

Answer 3

<ion-col sizeXs="12" sizeMd="6" class="radio-box">
    <ion-item lines="none" class="radio-item">
        <ion-radio [color]="setMyColor" mode="md" (ionSelect)="toggleColor()" value="Lorem"></ion-radio>
        <ion-label>Lorem</ion-label>
    </ion-item>
</ion-col>

В компоненте

setMyColor: string = '#0064D9';

В функции компонента

toggleColor() {
    this.setMyColor = 'primary';
}