我被要求为悬停事件中的下拉菜单设置背景颜色。我尝试将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
不能将“选项”样式设置为其特定于浏览器的功能。所以最好使用div创建一个自定义的select下拉列表。在那里你可以给颜色。