Change angular material input style

Question

I am trying to change the style of a angular material input.

So far I managed to change the background-color using :

md-input-container {
    padding-bottom: 5px;
    background-color: #222;
}

The placeholder and label color using :

md-input-container.md-default-theme label,   
md-input-container.md-default-theme .md-placeholder {  
    color: #FDFE67 !important; 
}

But I can't manage to change the line color under the text when we focus the input and the text color when we type in the input.

Here is the html input :

<md-content>
    <md-input-container>
        <label>{{isEnglish ? 'Search...' : 'Recherche...'}}</label>
           <input ng-model="searchInput" id="sInput" 
                  ng-change="filterCartoList(searchInput)" my-enter="filterCartoList(searchInput)">
    </md-input-container>
</md-content>

Edit: I managed to change the text color when typing this way :

md-input-container .md-input {
color: rgba(255,255,255,0.87);
border-color: rgba(254,253,103,0.82);
}

Just change the color of existing material input we can find there : material.angularjs.org/latest/#/demo/material.components.input After seing their example, "line color under the text when we focus the input and the text color when we type in the input." should be more clear to you, you can directly export their example to codepen. I also added the html input in the question — Ellone
– Ellone, Commented Sep 15, 2015 at 12:50

31piy · Accepted Answer · 2018-04-27 04:47:46Z

10

This is the CSS selector used by Angular Material:

md-input-container:not(.md-input-invalid).md-input-focused .md-input {
    border-color: your_color_here;
}

edited Apr 27, 2018 at 4:47

31piy

23.9k6 gold badges51 silver badges69 bronze badges

answered Sep 15, 2015 at 13:04

Fez Vrasta

15k25 gold badges111 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ellone Over a year ago

Thanks, don't know where to find those selectors in their doc :(

Fez Vrasta Over a year ago

I just inspected using chrome dev tools

Ellone Over a year ago

Well, I didn't manage to inspect the focused element. Was looking into it when u posted actually

Stav Bodik · Accepted Answer · 2016-05-16 16:09:10Z

1

<md-input-container style="position: relative; top:19px;">
                              <label style="border-color: white; color: white;">Email</label>
                              <input style="border-color: white; color: white;" >
                              </md-input-container>

answered May 16, 2016 at 16:09

Stav Bodik

2,1443 gold badges20 silver badges26 bronze badges

Collectives™ on Stack Overflow

Change angular material input style

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related