Ellone Ellone - 2 years ago 1582
HTML Question

Change angular material input style

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

So far I managed to change the

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
the input and the text color when we type in the input.

Here is the html input :

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

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);

Answer Source

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;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download