Угловой 5: другой цвет переднего плана для текста выбора списка - PullRequest
0 голосов
/ 12 июля 2019

Я хочу закрасить передний план опций списка выбора разными цветами: Ниже приведен код моего выпадающего списка:

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

Я хочу показать опциональный текст синим цветом и считать красным. Могу ли я в любом случае добиться этого?

Ответы [ 2 ]

1 голос
/ 12 июля 2019

Собственный <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

0 голосов
/ 12 июля 2019

<!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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...