CODEWITHSUNDEEP
cssangular
user6680
user6680

Reputation: 139

Styling mat-select when on hover - Angular Material

I have a mat-select, but I'm having trouble changing the color of the value in each mat-option from black to white on hover. I can change them all by using

.mat-option {
  background-color: #e0e0e0;
  color: black !important;
}

but it changes the one's that aren't hovering to white too, which I don't want. How can I change it to white only onhover? Non hovered items would be black

     <mat-form-field id="filter" appearance="outline" class="formFields">
        <mat-select [(value)]="selected">
          <mat-option *ngFor="let number of quantity" [value]="number">{{number}}</mat-option>
        </mat-select>
      </mat-form-field>

Here's a stackblitz

Upvotes: 0

Views: 7836

Answers (2)

Dalorzo
Dalorzo

Reputation: 20014

All CSS changes either you need to make them in the "root" css or use ng-deep like

::ng-deep{
     .mat-option-text:hover:not(.mat-option-disabled) {
      background: #3071a9 !important;
      color: white;
    }

 .mat-option:hover {
      background: red !important;
      color: green !important;
    }
}

Since here you are changing a standard control my recommendation is make this change in your styles.css or based css.

update Please node you I think what you want to modify is the mat-option-text:hover

Online Demo

Upvotes: 4

hugh
hugh

Reputation: 92

I've checked your stackblitz, there are 2 points you should change:

.mat-option:hover:not(.mat-option-disabled) {
  background: #3071a9 !important;
  color: white;
}

You should remove the !important here.

.mat-option:hover {
  background: red !important;
  color: green !important;
}

And use this to display your style on hover, the main point is :hover.

Upvotes: 0

Related Questions