在选择字段上设置选项的样式-悬停

Question

我被要求为悬停事件中的下拉菜单设置背景颜色。我尝试将class=“page-limit-option”类应用于option元素，但没有成功。我需要创建一个新的样式组件来代替选项吗？

<select class="page-limit"
   id="per-page"
   (change)="onLimitChange($event.target.value)">
   <option class="page-limit-option"
       *ngFor="let option of pageLimitOptions"
       [value]="option.value"
       [selected]="option.value == currentPageLimit"
   >
       {{ option.value }}
   </option>
</select>

在css文件中：

.page-limit {
  background-color: blue;
}

.page-limit-option {
  background-color: red;
}

.page-limit-option:hover {
  background-color: orange;
}

此处的stackblitz：https://stackblitz.com/edit/angular-style-a-select？file=app/app.component.ts

Answer 1

不能将“选项”样式设置为其特定于浏览器的功能。所以最好使用div创建一个自定义的select下拉列表。在那里你可以给颜色。