Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change angular material input style

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);
}
like image 392
Ellone Avatar asked Sep 15 '15 11:09

Ellone


People also ask

What is Matinput?

Matinput is an Angular directive that primarily allows input and text area elements to work with a form field. With this, you can display placeholders perfectly, add custom error messages, a clear button, specify the maximum length of the text or add prefixes and suffixes for a seamless user experience.

What is matSuffix?

The matSuffix is a configuration directive for the material input field, that will ensure that the calendar icon is added at the end (to the right) of the input field.

What is MatFormFieldControl?

MatFormFieldControl. An interface which allows a control to work inside of a MatFormField .

How do I change the color of my mat form field?

To change the mat form field border color in Angular, you have to target the . mat-form-field-outline class . This class is responsible for the 4 sides of borders around the mat form field element. So, to change the mat form field border color, you have to simply override the existing border color with the new one.


1 Answers

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;
}
like image 61
Fez Vrasta Avatar answered Sep 27 '22 17:09

Fez Vrasta