24

I am using mat-select in my Angular application. I would like to change the text color, but the color doesn't change. 

<mat-select style="color: red" [(ngModel)]="someValue">
  <mat-option>class="empty-select"</mat-option>
  <mat-option class="not-empty-select" *ngFor="let unit of units [value]="unit">{{unit}}</mat-option>
</mat-select>

I can change the background color without problems, but the text color doesn't change.

Dave
  • 3,073
  • 7
  • 20
  • 33
Nancy
  • 251
  • 1
  • 3
  • 5

9 Answers9

19

You need to apply style on mat-option rather than mat-select as:

<mat-select [(ngModel)]="someValue">
  <mat-option class="empty-select"></mat-option>
  <mat-option style="color: red" class="not-empty-select" *ngFor="let unit of units [value]="unit">{{unit}}</mat-option>
</mat-select>

Also you can set color in class not-empty-select.

Update 1:

If you want to change color of selected option add following CSS:

.not-empty-select.mat-selected {
  color: green !important;
}

Update 2:

If you want to change color in select box modify CSS as:

.not-empty-select.mat-selected {
  color: green !important;
}

:host /deep/ .mat-select-value-text {
  color: green !important;
}
Anshuman Jaiswal
  • 5,352
  • 1
  • 29
  • 46
  • 1
    This work on the options, but not on the selected value. I want the color red to appear on the selected value. – Nancy Oct 16 '18 at 05:31
  • Hi Anshuman. That works when you open the select, but not when you do not open the select. I want to see the green color when the screen is loaded and I do not click on the select yet. Do you know how to do that? – Nancy Oct 17 '18 at 07:18
  • 1
    Hi @AnshumanJaiswal is there a way to apply the :host /deep/ within the custom class so as not to affect all select texts on the page? – Rebecca Douglas May 24 '19 at 13:51
  • Use {{ selectedvalue }} for changing the view before clicked (the trigger). – Janos Vinceller Jul 01 '22 at 07:52
17

If you check closely mat-select-value is the class which holds the css for placeholer font in mat-select tag;

so Using

::ng-deep .mat-select-value{    
      color: white!important;  }

will apply the color you give. !important is to override the default value.

Ganapathy
  • 179
  • 1
  • 2
  • 1
    Adding :host in the beginning of the style will make it limited to the scope of component instead of leaking to global styles. – Imran Faruqi May 28 '21 at 19:11
10

You can overwrite the css for following elements as -

Select box panel

/deep/ .mat-select-panel {
    background-color: red;
}

Select box options element

/deep/ .mat-form-field-infix{
     background-color: red;
}

Select box

/deep/ .mat-select{
   background-color: red;
}

do not forget to add /deep/ as mentioned.

Select Box text color

Use this one if you want to change the text color of select.

/deep/ .mat-form-field-type-mat-select .mat-form-field-label, .mat-select-value {
  color: red;
}

Demo copy is here - https://stackblitz.com/edit/angular-material-pagination-123456-5teixy

Sunil Singh
  • 11,001
  • 2
  • 27
  • 48
  • Hi Sunil, thanks for your reply. The 3rd option is exactly what I am looking for, but unfortunately this doesn't work for the text color. Nothing changes if I do this: /deep/ .mat-select{ color: red; } – Nancy Oct 18 '18 at 07:47
  • 1
    Added the css overriding for text color `Select Box text color` – Sunil Singh Oct 18 '18 at 08:03
1

Add this to your styles.css file

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

In your component.html file

<mat-select class="mat-select-red" [(ngModel)]="someValue">
  <mat-option>class="empty-select"</mat-option>
  <mat-option class="not-empty-select" *ngFor="let unit of units [value]="unit">{{unit}}</mat-option>
</mat-select>
Dushyanth Kandiah
  • 546
  • 7
  • 12
1
::ng-deep .mat-select-arrow {
  display: none !important;
}

its works for me

hamed.nosrati
  • 169
  • 1
  • 6
  • Code only answers are discouraged. Please provide a summary of how your answer solves the problem and why it may be preferable to the other answers already provided. – DaveL17 Apr 18 '21 at 11:40
0
  <mat-select  [(ngModel)]="someValue">
      <mat-option style="color: red" >class="empty-select"</mat-option>
      <mat-option style="color: red" class="not-empty-select" 
         *ngFor="let unit of units [value]="unit">{{unit}}</mat-option>
    </mat-select>
harkesh kumar
  • 833
  • 2
  • 13
  • 35
0
option appearance (legacy, standard, fill, outline)

<mat-form-field appearance="legacy">
   <mat-label>Choose an option</mat-label>
   <mat-select>
      <mat-option value="option1">Option 1</mat-option>...
   </mat-select>
</mat-form-field>
krisyupher
  • 13
  • 3
0

Lets say you have this select:

<mat-form-field appearance="fill">
    <mat-label>The label</mat-label>
    <mat-select>
        <mat-option value="This">This</mat-option>
        <mat-option value="That">That</mat-option>
    </mat-select>
</mat-form-field>

This is displayed like this:

enter image description here

To style the colors only, try this:

::ng-deep .mat-form-field.mat-focused .mat-form-field-ripple {
    background-color: red;
}

::ng-deep .mat-form-field.mat-focused .mat-form-field-label {
    color: red;
}

::ng-deep .mat-form-field.mat-focused.mat-primary .mat-select-arrow{
    color: red;
}

::ng-deep .mat-primary .mat-option.mat-selected:not(.mat-option-disabled){
    color: red;
}

Which produces

enter image description here

This works on Angular 11.2.0, Angular Material 11.2.0.

Odys
  • 8,951
  • 10
  • 69
  • 111
0

This helped me change the style of the selected text:

::ng-deep .mat-selected .mat-option-text { color: white!important; }

enter image description here

Artur Haiduk
  • 31
  • 5