[英]Ionic Vue: How do I change the text color of a selected option?
I have a simple ionic select component with vue:我有一个带有 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>
Once the user selected an option, I want to colour it respectively:一旦用户选择了一个选项,我想分别为它着色:
Unfortunatelly, the docs only reveal to me, how the colour the select option within the select dropdown ( here ).不幸的是,文档只向我揭示了 select 下拉列表中 select 选项的颜色(此处)。
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?我如何将它染成棕色?
You can use CSS Shadow Parts for that.您可以为此使用CSS 阴影部件。
For the ion-select
component, the exposed parts are icon
, placeholder
and text
.对于
ion-select
组件,暴露的部分是icon
、 placeholder
和text
。
ion-select::part(text) {
color: brown;
}
Unfortunately, I don't know to achieve that with earlier versions of Ionic.不幸的是,我不知道用早期版本的 Ionic 来实现这一点。
It might work with latest versions of Ionic 4 though.不过,它可能适用于最新版本的 Ionic 4。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.