CODEWITHSUNDEEP
cssionic-framework
timgavin
timgavin

Reputation: 5166

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

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?

Upvotes: 2

Views: 9053

Answers (2)

timgavin
timgavin

Reputation: 5166

Figured it out. The .sc-ion-alert-md class will change the text color of the radio labels. Tested in Chrome with both iOS and Android using ionic serve.

ion-alert.select-alert {
    --background: black!important;

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

    .sc-ion-alert-md {
        color: white;
    }
}

Upvotes: 3

Nidhin Joseph
Nidhin Joseph

Reputation: 10227

<ion-select> under the hood uses <ion-alert> which is why your style conflicts. You can use the :not() css to exclude the <ion-select>

ion-alert:not(.select-alert) {
  --background: black !important;
  --color: white !important;

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

Upvotes: 2

Related Questions