Search code examples
frontendionic4

CSS selector for ionic-radio labels

I'm creating a list of radio buttons which when checked should change the color of corresponding label but it seems not to work at all using css selectors. what am i missing here?

template- 

<ion-list class="addressList">
    <ion-radio-group">
    <ion-item *ngFor="let address of address">
      <label for="ok" >  
        {{address.address}}
      </label>
      <ion-radio id="ok" class="radio-custom" mode='ios' slot="end" value="{{address.address}}"></ion-radio>
    </ion-item>
  </ion-radio-group>    
  </ion-list>

app.scss -

:checked + label {
  color: var(--ion-color-primary) !important;

}
Solution

  • I think the best way to figure out styling is to use chrome dev tools, click on the item in question and see what classes such element obtains during "checked" state:

    enter image description here

    Then you could build your styling rules around it, but please note that if the element is inside of a "shadow root" you need to use css variables to apply styles (since those elements' style would be incapsulated inside shadow dom)

    <ion-list class="addressList">
    <ion-radio-group>
    <ion-item *ngFor="let address of [0,1,2,3,4,5,6,7]">
      <ion-label>address #{{ address }}</ion-label>
      <ion-radio mode='ios' slot="end" value="{{address}}"></ion-radio>
    </ion-item>
    </ion-radio-group>    
  </ion-list>

    and css:

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

    You can play with many CSS vars Ionic team created from here: https://ionicframework.com/docs/api/item#css-custom-properties

    These are applied at ion-item scope.