How to change radio color on selected ion-select

Question

I created this select My ion-select

So I changed the color of the buttons to cancel and Ok, so far everything as it should be. My problem is that I can't change the color of the selected radio. the default color is blue, i would like to change the radio color when selected.

<ion-select id="category" cancelText="Cancelar" okText="Confirmar" multiple="true" value="" placeholder="Selecionar">
  <ion-select-option color="verde" value="Acessórios para Veículos">Acessórios para Veículos</ion-select-option>
  <ion-select-option value="Alimentos e Bebidas">Alimentos e Bebidas</ion-select-option>
  <ion-select-option value="Animais">Animais</ion-select-option>
  <ion-select-option value="Antiguidades e Coleções">Antiguidades e Coleções</ion-select-option>
  <ion-select-option value="Arte e Papelaria ">Arte e Papelaria </ion-select-option>
</ion-select>

you can find the answer here https://stackoverflow.com/questions/69190742/change-the-color-of-selected-item-ion-select — uKioops, Nov 09 '21 at 15:24
This method does not seem to apply in my case. Note that my ion-select is multiple — Ivanilson António, Nov 09 '21 at 21:12

score 0 · Answer 1 · answered Nov 10 '21 at 14:22

You need to adapt the answer to your case :

In your html, add the [interfaceOptions] :

<ion-select [interfaceOptions]="customAlertOptions" id="category" cancelText="Cancelar" okText="Confirmar" multiple="true" value="" placeholder="Selecionar">
   <ion-select-option color="verde" value="Acessórios para Veículos">Acessórios para Veículos</ion-select-option>
   <ion-select-option value="Alimentos e Bebidas">Alimentos e Bebidas</ion-select-option>
   <ion-select-option value="Animais">Animais</ion-select-option>
   <ion-select-option value="Antiguidades e Coleções">Antiguidades e Coleções</ion-select-option>
   <ion-select-option value="Arte e Papelaria ">Arte e Papelaria </ion-select-option>
</ion-select>

In your ts file, add the CssClass

export class HomePage {

  customAlertOptions: any = {
    cssClass: 'customAlertCss',

  };
   ....
}

In the global.scss you add what you need. The console help you find the class to modify most of the time

 .customAlertCss {
     [aria-checked=true].sc-ion-alert-md .alert-checkbox-icon.sc-ion-alert-md {
         border-color: red !important;
         background-color: red !important;
  }

}

For those looking for the same solution: don't forget to add the mode="md" — Ivanilson António, Nov 10 '21 at 18:21
Great, you can valide the answer as the solution then. Happy coding ! — uKioops, Nov 11 '21 at 10:06

How to change radio color on selected ion-select

1 Answers1