CODEWITHSUNDEEP
angularangular-material
wtimi
wtimi

Reputation: 161

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

Upvotes: 11

Views: 57642

Answers (6)

Martin Jourjon
Martin Jourjon

Reputation: 1

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

Upvotes: 0

Mohamed BOUSSAKSSOU
Mohamed BOUSSAKSSOU

Reputation: 421

If you are using angular ..
add this in 'style.css'

 .mat-form-field-empty.mat-form-field-label {
    color: green;}

Upvotes: 0

Momin Shahzad
Momin Shahzad

Reputation: 747

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

Upvotes: 20

wtimi
wtimi

Reputation: 161

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

this is my style.less

@import 'my.css';

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

.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

the text is not color purple , the background green is ok

Upvotes: 1

Nakul Sharma
Nakul Sharma

Reputation: 534

@J.S. is correct if you haven't included theme in your application, but if you are interested in customizing color properties of input field-

For changing the color of place-holder(in this case 'input') you can change 'color' of below class - 

.mat-form-field-empty.mat-form-field-label {
    color: green;
}

For changing the underline-color when it's highlighted- 

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

you will have to include this code piece in styles.scss (or styles.css).

Upvotes: 9

J. S.
J. S.

Reputation: 2374

Have you applied a color theme to your project: how to Include a theme, e.g adding this into your styles.css:

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Also important Angular Material Theming Guide

Material decides, based on a color palette, which color should be applied. You can configure it like described in the links.

As last option you can overwrite styles (not recommended) using the css-selectors. You can debug your app in browser to get to know which css-selector to use. In your case I think you can use: 

.mat-form-field

Or if that does not work use:

::ng-deep .mat-form-field

Upvotes: 2

Related Questions