How can I change the text color for ion-select items in Ionic 4?

Ionic Framework
1

I styled my alerts in theme/variables.scss like so (black background with white text)

ion-alert {
    --background: black !important;
    --color: white !important;

    button {
        color: white !important;
        font-size: 20px !important;
    }
}

<ion-item>
    <ion-label>Quantity</ion-label>
    <ion-select formControlName="quantity" placeholder="Select One">
        <ion-select-option value="1">1</ion-select-option>
        <ion-select-option value="2">2</ion-select-option>
    </ion-select>
</ion-item>

Now the problem is, when I add a select menu using ion-select the radio/select text (ion-select-option) is black, so it blends in with the background of the popup. I’ve tried about 30 different CSS classes and none of them are having any impact.

How do I change the color of the radio text?

1 Like
2

Figured it out.

ion-alert:not(.select-alert) {
    --background: #222428;
    --ion-text-color: white;

    button {
        color: white !important;
        font-size: 20px !important;
    }

    .alert-message {
        color: #ddd;
    }
}