3

I am using ion-select for selecting an option and i want to change the text color of ion-option. My code is as below...

<ion-item>
    <ion-select interface="popover" [(ngModel)]="selectedGrp" (ionChange)="changeGrp()">  
        <ion-option value="" selected disabled>Select</ion-option>
        <ion-option *ngFor="let item of List;let i = index" [value]="item">{{item.name}} </ion-option>
    </ion-select>
</ion-item>

There are no SASS Variables for doing this. I have tried by using css and styles but it's not working. Can any one help me to change the ion-option text color?

Deitsch
  • 1,610
  • 14
  • 28
gaurang
  • 2,217
  • 2
  • 22
  • 44

1 Answers1

5

I was able to change the text color (of all ion-options) by inserting in app.scss

.item-radio.item ion-label {
    color: red; //your color here
}

For the selected option, insert a !important to the color attribute

.item-radio-checked.item ion-label {
    color: blue !important; //your color here for selected option
}
Mystery
  • 1,031
  • 8
  • 15
  • its working but before that when i select any option then selected option is set to primary color but after using this selected option color is not updating can you tell me how to do it? – gaurang Jul 10 '18 at 09:08