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"
   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;
}

stackblitz here: https://stackblitz.com/edit/angular-style-a-select?file=app/app.component.ts

Answer

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 *