如何在Ionic5+Angular11中为ion-select-option标签设置两种颜色

Ionic 5 中ion-select-option内部的嵌套HTML标签会被框架默认剥离，仅保留纯文本内容，因此你写入的span元素会被自动移除，无法直接通过内嵌标签实现多颜色文本效果。

方案1：自定义属性+CSS伪元素实现（改动最小，无需修改原有交互逻辑） #

通过给ion-select-option绑定自定义属性存储两段文本，再用CSS伪元素读取属性值分别渲染不同颜色：

模板代码 #

<ion-select 
  (ionChange)="onPresetChange($event)" 
  value="main" 
  interface="popover"
  [interfaceOptions]="popoverOptions"
>
  <ion-select-option 
    value="main" 
    data-main-text="Main" 
    data-detail-text="(details)"
  >
  </ion-select-option>
</ion-select>

TS代码补充 #

给popover配置自定义类名：

export class YourComponent {
  popoverOptions = {
    cssClass: 'custom-select-popover'
  };

  onPresetChange(event: any) {
    // 原有逻辑保持不变
  }
}

全局样式（/src/global.scss） #

/* 适配弹出层内选项样式 */
ion-popover.custom-select-popover .select-option-text {
  font-size: 0; /* 隐藏默认空白文本 */
}
ion-popover.custom-select-popover .select-option-text::before {
  content: attr(data-main-text);
  color: #2d3748; /* 主文本自定义颜色 */
  font-size: 16px;
  margin-right: 4px;
}
ion-popover.custom-select-popover .select-option-text::after {
  content: attr(data-detail-text);
  color: #718096; /* 详情文本自定义颜色 */
  font-size: 16px;
}

/* 适配选中后select输入框内的显示样式 */
ion-select::part(text) {
  font-size: 0;
}
ion-select::part(text)::before {
  content: 'Main';
  color: #2d3748;
  font-size: 16px;
  margin-right: 4px;
}
ion-select::part(text)::after {
  content: '(details)';
  color: #718096;
  font-size: 16px;
}

如果是动态多选项场景，可以给ion-select绑定动态CSS类，根据当前选中值切换对应伪元素的content属性即可。

方案2：自定义弹出层组件实现（适合复杂自定义需求） #

如果需要更灵活的交互或更多自定义样式，可以自己实现一个弹出层组件替代默认的ion-select弹出层，完全自主控制选项的HTML结构和样式，不受Ionic默认组件的标签剥离限制。

内容的提问来源于stack exchange，提问作者Nick Tsitlakidis