Question: this is my user Form:

[![enter image description here](https://i.stack.imgur.com/7eLp9.jpg)](https://i.stack.imgur.com/7eLp9.jpg)

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 :

```html
<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

```

Answer: 
thanks ,
I would working with a custom css directly, I use less and visual studio compile css.

this is my `style.less`

```less
@import 'my.css';

```

I've forked my.css in the file:
`@angular\material\prebuilt-themes\purple-green.css`

```less
.mat-form-field-empty.mat-form-field-label {
    background: green;
    color:purple;
}

.mat-form-field-underline {
    background-color: green;
    color:blue;
}

::ng-deep .mat-form-field{
    color:red
}

//css @angular\material\prebuilt-themes\purple-green.css in at bottom...

```

This is the result:

[![background ok but the text is white](https://i.stack.imgur.com/BwTyX.png)](https://i.stack.imgur.com/BwTyX.png)

the text is not color purple , the background green is ok
`ng::deep` disable view encapsulation for specific CSS rules, in other words, it gives you access to DOM elements, which are not in your component's HTML.

You will have to use it to select the form field

`::ng-deep .mat-form-field`