Change mat-select-arrow and mat-select-underline when focused
Solution 1
Avoid using /deep/
(read this documentation). You should use ViewEncapsulation.
In your ts file, set ViewEncapsulation to None:
import { ViewEncapsulation } from '@angular/core';
@Component({
...
encapsulation: ViewEncapsulation.None
})
.. and add the following classes to your component's css file:
/* to change arrow when focused */
.mat-select:focus:not(.mat-select-disabled).mat-primary .mat-select-arrow {
color: #63961C;
}
/* to change underline when focused */
.mat-select:focus:not(.mat-select-disabled).mat-primary .mat-select-underline {
background-color: #63961C;
}
/* to change plceholder text when focused */
.mat-select:focus:not(.mat-select-disabled).mat-primary .mat-select-trigger {
color: #63961C;
}
/* to change selected item color in the select list */
.mat-primary .mat-option.mat-selected:not(.mat-option-disabled) {
color: #63961C;
}
Link to working demo.
To make the css shorter,
.mat-select:focus:not(.mat-select-disabled).mat-primary
.mat-select-arrow , .mat-select-underline , .mat-select-trigger
{
color: #63961C;
}
/* to change selected item color in the select list */
.mat-primary .mat-option.mat-selected:not(.mat-option-disabled) {
color: #63961C;
}
Solution 2
Add this to your style.css
.mat-form-field.mat-focused .mat-form-field-ripple{
background-color: blue;
}
.mat-form-field.mat-focused.mat-primary .mat-select-arrow {
color: blue;
}
.mat-primary .mat-option.mat-selected:not(.mat-option-disabled) {
color: blue;
}
Solution 3
For angular material 2 and setting the underline for inputs I have to set:
.mat-form-field-ripple {
background-color: red;
}
derOtterDieb
Updated on July 09, 2022Comments
-
derOtterDieb almost 2 years
So far I've tried lots of different things, such as:
/deep/ .mat-select:focus .mat-select-trigger .mat-select-arrow { color: #63961C; } /deep/ .mat-select:focus .mat-select-trigger .mat-select-underline { background-color: #63961C; }
Or :
/deep/ .mat-select.mat-focused .mat-select-trigger .mat-select-arrow { color: #63961C; } /deep/ .mat-select.mat-focused .mat-select-trigger .mat-select-underline { background-color: #63961C; }
to change that little arrow next to a select, and the underline.
For example, I did
/deep/ .mat-input-container.mat-focused .mat-input-underline { background-color: #63961C; }
for the underline of an Input, and it worked fine (it becomes green when focusing). (yes /deep/ works fine for this project, though it's deprecated now if I remember well)
I managed to change it "all the time", but what I want, is to have it green only on focus, and keep it grey if not focused.