css - 如何在离子选择选项标签中有 2 种颜色

Question

我正在使用一个典型的ion-select组件，我希望每个组件的标签都ion-select-option使用 2 种颜色。

标签是这样的：主要（细节）所以我希望“主要”部分是一种颜色，而“（细节）”部分是另一种颜色。

我正在尝试使用一个span元素来实现它，但它似乎span在运行时消失了。

<ion-select (ionChange)="onPresetChange($event)" value="main">
      <ion-select-option value="main">
            Main <span class="details-style">(details)</span>
      </ion-select-option>
</ion-select>

关于如何做到这一点的任何想法？

Ionic 版本是 5，Angular 版本是 11

Answer 1

要实现它，您可以使用Ionic CSS Shadow Parts。它允许在 Shadow DOM 组件内的元素上设置 CSS 属性的样式。

ion-select::part(placeholder) {
   color: blue;
   opacity: 1;
}