Styling an option on a select field – hover

I have been asked to style the background colour of a dropdown on a hover event. I tried applying a class class=”page-limit-option” to the option element, but no luck. Do I need to create a new style component to use instead of the option?

<select class="page-limit"
   <option class="page-limit-option"
       *ngFor="let option of pageLimitOptions"
       [selected]="option.value == currentPageLimit"
       {{ option.value }}

In the css file :

.page-limit {
  background-color: blue;

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

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

stackblitz here:


You can not style option as its browser specific feature. So better make a custom select dropdown using div. there you can give colors.

Leave a Reply

Your email address will not be published. Required fields are marked *