Change color of radio button selected text

Ionic Framework Ionic Vue
1

How can I change the color of ionic label text when the radio button is checked? This is what I am trying to do but I don’t know how to translate it to ionic CSS:

image

ion-label input[type="radio"]:checked {

  color:red !important;  

}

I want both the box and the words “Rigid Frame 20"” to turn red when it is checked.

Here is the HTML code:

          <ion-radio-group mode= 'ios' value='chairs' @ionChange='changeColor'>
            <ion-item v-for='chair in chairs' v-bind:key='chair.name' lines='none'>
              <ion-label v-if="chair.type == 'AUWR'" style="color:#CACACC;  line-height: 24px; font-size: 16px; letter-spacing: -0.25px;">{{chair.name}} <span>{{showMetric ? inchesToMetric(chair.size) + 'cm' : chair.size + '"'}}</span></ion-label>
              <ion-label v-if="chair.type == 'OWR'" style="color:#CACACC;  line-height: 24px; font-size: 16px; letter-spacing: -0.25px;">{{chair.name}}</ion-label>
              <ion-radio slot='start' v-model='chair.name' @click='onClickRadio(chair.size)' style='width:23px;height:23px;border-radius:4px;border:3px solid #D3D7D9;'></ion-radio>
            </ion-item>
          </ion-radio-group>
2

Ionic adds a .item-radio-checked class to the ion-item when the radio is checked. You can use that as the basis for the selector:

.item-radio-checked ion-label {
  --color: red;
}
1 Like
3

image
image1296×226 22.5 KB

Hey Idebeasi, it’s still not changing colors to red. This is what I have so far in variables.css

ion-radio{
  --color-checked: red !important;
}

ion-label.item-radio-checked {
  --color: red;
}

.item-radio-checked ion-label {
  --color: red !important;
}
4

Hard to say what the issue might be without being able to reproduce it on my end. Can you send over a GitHub repo?

edit: Also ion-label.item-radio-checked is not correct as .item-radio-checked is a class added to ion-item not ion-label, so I would not expect that to work.

1 Like
5

Hi the solution was to not have --color. It was just color.