Ionic Vue：如何更改所选选项的文本颜色？

Question

我有一个带有 vue 的简单离子 select 组件：

<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>

一旦用户select输入了一个选项，我想分别给它上色：

不幸的是，文档只向我揭示了 select 下拉列表 (here) 中的 select 选项的颜色。

为了给 selected 选项上色，我尝试了

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

或

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

如何将它涂成棕色？

Answer 1

离子 5

您可以使用 CSS Shadow Parts。
对于ion-select组件，暴露的部分是icon、placeholder和text。

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

不幸的是，我不知道如何使用早期版本的 Ionic 实现这一点。
不过，它可能适用于最新版本的 Ionic 4。

Ionic Vue：如何更改所选选项的文本颜色？

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

select

ionic-framework

vue.js

ion-select

离子 5