CODEWITHSUNDEEP
javascripthtmlcssangular
tmc
tmc

Reputation: 494

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

Upvotes: 2

Views: 1327

Answers (1)

Nirmalya Roy
Nirmalya Roy

Reputation: 713

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

Upvotes: 2

Related Questions