Angular Materials - Mat-Select Change Selected Value Color

Question

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.

In chrome inspector I can see the font color is defined by class .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;
}

Jorge Mussato · Answer 1 · 2020-01-10T02:17:47.790

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

Thanks for the solution, unfortunately I need the styling to be dynamic as it used in a form building app. And noted on the level — Ka Tech, Jan 10 '20 at 02:58

score 1 · Answer 2 · edited Oct 17 '22 at 18:06

1

You can changed selected value color using two ways

1.

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

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

edited Oct 17 '22 at 18:06

fujy

5,168
5
31
50

answered May 04 '21 at 13:07

Prerna Jena

11
2

While this code may solve the question, [including an explanation](//meta.stackexchange.com/q/114762) of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. Please [edit] your answer to add explanations and give an indication of what limitations and assumptions apply. – Yunnosch May 04 '21 at 13:10

Angular Materials - Mat-Select Change Selected Value Color

2 Answers2