Angular 5 : select 列表选项文本的不同前景色

Question

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

<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

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

Answer 2

<!DOCTYPE html>
<html>
   <head>
      <style type="text/css">
         option.red {
             background-color:red
          }
         option.blue {
             background-color:blue
         }
         option.white {
             background-color:white
         }
      </style>
   </head>
   <select>
      <option value="item 1" class="red">Item 1</option>
      <option value="item 2" class="blue">Item 2</option>
      <option value="item 3" class="white">Item 3</option>
   </select>
</html>

Angular 5 : select 列表选项文本的不同前景色

Angular 5 : Different foreground color for select list option text

html

css

angular

angular5