CODEWITHSUNDEEP
vue.jsionic-frameworkselection-select
Julian
Julian

Reputation: 603

Ionic Vue: How do I change the text color of a selected option?

I have a simple ionic select component with vue:

<template>
  <ion-item>
    <ion-label position="floating">Select</ion-label>
    <ion-select>
      <ion-select-option value="brown">Brown</ion-select-option>
      <ion-select-option value="blonde">Blonde</ion-select-option>
      <ion-select-option value="black">Black</ion-select-option>
      <ion-select-option value="red">Red</ion-select-option>
    </ion-select>
  </ion-item>
</template>

<script>
import { IonItem, IonLabel, IonSelect, IonSelectOption } from '@ionic/vue';

export default{
  components: { IonItem, IonLabel, IonSelect, IonSelectOption },
};
</script>

Once the user selected an option, I want to colour it respectively: enter image description here

Unfortunatelly, the docs only reveal to me, how the colour the select option within the select dropdown (here).

To colour the selected option, I tried things like

<ion-select-option value="brown"><span style="color:brown">Brown</span></ion-select-option>

or

<ion-select-option value="brown" style="color:brown">Brown</ion-select-option>

How do I colour it in brown?

Upvotes: 0

Views: 982

Answers (1)

Reqven
Reqven

Reputation: 1778

Ionic 5

You can use CSS Shadow Parts for that.
For the ion-select component, the exposed parts are icon, placeholder and text.

ion-select::part(text) {
  color: brown;
}

Unfortunately, I don't know to achieve that with earlier versions of Ionic.
It might work with latest versions of Ionic 4 though.

Upvotes: 1

Related Questions