Change border-bottom-color in Material Design input


I am trying to modify the color of the lower edge of an input of the material design library that Angular offers ( Link ) by white and there is no way. I tried to edit the md-input-container and internal classes but nothing.

    <span class="toolbar-spacer"></span>
        <input mdInput #filter type="search">
        <span mdSuffix>
asked by dddenis 28.07.2017 в 17:21

1 answer


Probably the kind of css you want to modify is "mat-input-underline"

what you can do to change the color is to do the following:

    color: blue;

This will change the lower border to blue, additionally if you want to change the border color when the input has focus, you should change the following:

.mat-input-ripple {
    background-color: green;

I must clarify that these css lines would change all your inputs to those colors, if you only want an input to have that color you must create the correct selector (probably with the ID).

I hope you serve, greetings.

answered by 28.07.2017 / 23:34