Javascript 设置选定字段上选项的样式-悬停

我被要求设计悬停事件下拉列表的背景颜色。我尝试对option元素应用class=“page limit 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>

这里有闪电战：

---

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

在许多浏览器中都不会响应事件。这就是为什么大量不同的

替代品被直接使用的原因之一。使用JS控制逻辑创建一个基于div的自定义下拉列表，并使单击的选项为隐藏字段提供值，例如。

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

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

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