I need help customizing the background color of a dropdown menu when hovered over. I attempted to assign a class "page-limit-option" to the option element, but it didn't work. Should I create a new style component instead of using the 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>
In the css file :
.page-limit {
background-color: blue;
}
.page-limit-option {
background-color: red;
}
.page-limit-option:hover {
background-color: orange;
}
Check out the example on stackblitz: https://stackblitz.com/edit/angular-style-a-select?file=app/app.component.ts