html - Angular 5 : Different foreground color for select list option text

Question

我想用不同的颜色为选择列表选项的前景着色:以下是我的下拉菜单的代码:

<select id="tier" class="form-control" [(ngModel)]="tierId">
    <option *ngFor="let m of tierList" value="{{m.tier}}" >
        {{m.optiontext}} | {{m.count}} 
    </option>
</select>

我想以蓝色显示选项文本并以红色显示计数。无论如何我可以做到这一点吗？

Answer 1

native <select>不支持在一个选项中使用多种颜色。

您可以尝试其他库，例如@angular/material。

例如:

<mat-select id="tier" [(value)]="tierId">
  <mat-option *ngFor="let m of tierList" [value]="m.tier">
    <span style="color: blue;">{{m.optiontext}}</span> |
    <span style="color: red;">{{m.count}}</span>
  </mat-option>
</mat-select>

有关详细信息，请参阅 https://v5.material.angular.io/components/select/examples