ionic ion-select dyamic class

Question

I use ionic 3 and trying to change background-color ion-select.

html file :

        <ion-select   [class.disabledField]="disabledVar" disabled="{{disabledVar}}"  [(ngModel)]="dataModel">
            <ion-option *ngFor="let item of lists" value="{{item.id_str}}">{{item.text}}</ion-option>
          </ion-select>

scss file:

 .disabledField { 
        background-color:#d7d7d7;
    }

The background-color can't change. but somehow this code no issue with ion-input and ion-datetime. this problem only with ion-select.

I really appreciate if someone can help me.

Thank you.

Encep Encep · Accepted Answer · 2018-04-16T01:41:51

Problem solve

.item-select-disabled ion-label,ion-datetime {
        opacity: 100;
        color:#000;
        font-size: $font-size-field;
    }


    .disabledField { 
        opacity: 100;
        background-color:#d7d7d7;
    }

    .select-disabled {  
        opacity: 100;
        background-color:#d7d7d7 !important; 
        /*you can optionally add !important*/
    }

 <ion-select   [class.disabledField]="disabledVar" disabled="{{disabledVar}}"  [(ngModel)]="dataModel">
            <ion-option *ngFor="let item of lists" value="{{item.id_str}}">{{item.text}}</ion-option>
          </ion-select

ionic ion-select dyamic class

1 Answers