Change border-bottom-color in Material Design input

Question

Change border-bottom-color in Material Design input

Navigation

#1 by (2 votes)

1

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.

<md-toolbar>
    <md-icon>account_box</md-icon>
    <span>Usuarios</span>
    <span class="toolbar-spacer"></span>
    <md-input-container>
        <input mdInput #filter type="search">
        <span mdSuffix>
            <md-icon>search</md-icon>
        </span>
    </md-input-container>
    <md-icon>add</md-icon>
</md-toolbar>

css material-design angularjs-4.0

asked by dddenis 28.07.2017 в 17:21

source

1 answer

PHP and MySQL Get multiple selects checked checboxes I want to make a textarea that has a modifiable and a non-modifiable part

score 2 · Accepted 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:

.mat-input-underline{
    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.