CODEWITHSUNDEEP
angularangular-materialangular-material-8
Ka Tech
Ka Tech

Reputation: 9457

Angular Materials - Mat-Select Change Selected Value Color

I am using Angular Material 8.2.3 in my project and I am trying to change the selected value color for Mat-Select component(ie drop down menu) as below.

Mat Select

In chrome inspector I can see the font color is defined by class .mat-select-value

mat-select-value

However when I try to change the color using class selectors nothing happens.

Is there a way to change the selected value color? I have other menu drop downs on the page so it has to be confined to this component. Many thanks in advance.

My code below.

HTML

<mat-select class="custom-color"  [(ngModel)]="value">
    <mat-option>
        Yes
    </mat-option>
    <mat-option>
        No
    </mat-option>
</mat-select>

CSS

Attempt 1:

.custom-color.mat-select-value{
    color: green !important;
}

Attempt 2:

.custom-color > .mat-select-value{
    color: green !important;
}

Upvotes: 3

Views: 8599

Answers (2)

Prerna Jena
Prerna Jena

Reputation: 11

You can changed selected value color using two ways

1.

 .mat-select-value {
    color: #60D2A7 !important;
 }
  1. .mat-select-value-text { color: #60D2A7 !important; }

Upvotes: 1

Jorge Mussato
Jorge Mussato

Reputation: 2514

You should add a class in the select (like you already did).

After that, you need to get the selector of how deep you want to go (if there's div inside div inside div...)

If the class you set is in the same html component as the mat-select-value class, then you are ok doing .custom-color.mat-select-value.

However, angular material styles works in a way you can't access it's class easy (if you don't use ng-deep).

To style the component you must do the following:

Create a mixin in your scss component:

@import '~@angular/material/theming';

// Custom mat-select theme
@mixin mat-select-theme() {
  .custom-color.mat-select-value {
     color: green; // You may need to use important here, but it's just in a few cases
  }
}

After that, declare your @mixin in your main scss file (i.e. styles.scss)

@import '~@angular/material/theming';
// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();

@import 'pathToFile.scss';
@include mat-select-theme();

Try it out.

Material theme guide in case you need:

https://material.angular.io/guide/theming

Upvotes: 2

Related Questions