Ionic 3选中另一个后,如何更改离子无线电颜色的无线电图标?

时间:2019-06-18 07:19:34

标签: css ionic-framework sass ionic3

我需要更改选中的单选图标的颜色。

我将ion-radio的现有样式更改为:

ion-radio.radio.radio-checked, ion-radio.radio.radio-md
{
   background-color: white;
}

但这不是必需的。

然后更改为:

ion-radio.radio.radio-checked, ion-radio.radio.radio-md
{
   color: white;
}

但还是一样。

我需要将选中的变量的蓝色更改为白色。

然后我尝试将radio-innerradio-icon更改为:

ion-radio.radio.radio-checked, ion-radio.radio.radio-md
, ion-radio.radio.radio-icon, ion-radio.radio-inner{
  background-color: white;
}

但是它没有改变。

从文档中,我们应该将以下css变量更改为另一种颜色:

--color-checked 

但是还是一样。这是stackblitz

1 个答案:

答案 0 :(得分:1)

请尝试以下CSS代码:

.radio-md .radio-checked,
.radio-md-primary .radio-checked {
  border-color: #fff;
}
.radio-md .radio-inner,
.radio-md-primary .radio-inner {
   background-color: #fff;
}
.item-md .radio-md {
   background-color: transparent;
}

并删除此代码:

ion-radio.radio.radio-checked, ion-radio.radio.radio-md
{
   background-color: white;
}