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);
}
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.
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.
MatFormFieldControl. An interface which allows a control to work inside of a MatFormField .
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.
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With