How to change the background color of the window that opens up when you use ion-select?

Question

this is my code <ion-item> <ion-select label="Gender" [(ngModel)]="gender"> <ion-select-option value="female">Female</ion-select-option> <ion-select-option value="male">Male</ion-select-option> </ion-select> </ion-item>

I want to change the background color of the window that opens when the user wants to select an option, i couldn't find anything on the ionic page docs

Answer 1

Ionic is based on CSS variables, according to their docs. To change the background color of the alert which opens when clicking an ion-select, override the --background variable value with the following CSS code:

ion-alert.select-alert {
  --background: green; /* or whatever color you would like */
}

Note that this need to be in the global styles (styles.css), as the ion-alert element is not part of the DOM of your component.

StackBlitz demo: https://stackblitz.com/edit/angular-gzd3xi?file=src%2Fstyles.css