Change angular material input style
28,188
Solution 1
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;
}
Solution 2
<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>
Author by
Ellone
Updated on July 09, 2022Comments
-
Ellone almost 2 years
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); }
-
Ellone over 8 yearsThanks, don't know where to find those selectors in their doc :(
-
Fez Vrasta over 8 yearsI just inspected using chrome dev tools
-
Ellone over 8 yearsWell, I didn't manage to inspect the focused element. Was looking into it when u posted actually