Change mat-select-arrow and mat-select-underline when focused

user_6197514 0
Viewed 24186

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.

angular-material2 angular-material angular
3 Answers

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;
    }
user_95146760

For angular material 2 and setting the underline for inputs I have to set:

.mat-form-field-ripple {
background-color: red;
}
user_23573700
Related