Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to color text input in Angular material

this is my user Form:

enter image description here

I have a problem, the color of input field is white, and the background is same white. I could not find anywhere How to change the color of input field.

What the attribute css for color texte ?

this is my template :

<div class="example-container" style="color:red">
    <mat-form-field>
      <input matInput placeholder="Input">
    </mat-form-field>

    <mat-form-field>
      <textarea matInput placeholder="Textarea"></textarea>
    </mat-form-field>

    <mat-form-field>
      <mat-select placeholder="Select">
        <mat-option value="option">Option</mat-option>
      </mat-select>
    </mat-form-field>
  </div>
  new contact
like image 238
wtimi Avatar asked May 30 '18 12:05

wtimi


People also ask

How does MatInput change color?

Using --> ::ng-deep. mat-form-field-ripple { /*change color of underline when focused*/ background-color: green ! important;; } works. Great,you should also try with material custom themes.

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?

Configuring the mat-datepicker-toggle icon 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.


1 Answers

Here is some most common properties of angular material v7

/* input color class */
::ng-deep input.mat-input-element {
  color: #484a4c;
}

/* Change label color on focused */
::ng-deep .mat-form-field.mat-focused .mat-form-field-label {
  color: #50d0fb !important;
}

/* underline border color on focused */
::ng-deep .mat-focused .mat-form-field-underline .mat-form-field-ripple{
  background-color: #50d0fb !important;
}
like image 183
Momin Shahzad Avatar answered Sep 22 '22 00:09

Momin Shahzad