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

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

角度5：选择列表选项文本的不同前景色

2 个答案: