how to custom mat input field in angular 8 code example

Example 1: angular material input

Html

  
    Favorite food
    
  

  
    Leave a comment
    
  


TS
import {Component} from '@angular/core';

/**
 * @title Basic Inputs
 */
@Component({
  selector: 'input-overview-example',
  styleUrls: ['input-overview-example.css'],
  templateUrl: 'input-overview-example.html',
})
export class InputOverviewExample {}

CSS
.example-form {
  min-width: 150px;
  max-width: 500px;
  width: 100%;
}

.example-full-width {
  width: 100%;
}

Example 2: stylin mat input

//Standard
  .mat-form-field {
    .mat-input-element {
      color: slategray;
    }
    .mat-form-field-label {
      color: slategray;
    }
    .mat-form-field-underline {
      background-color: slategray;
    }
    .mat-form-field-ripple {
      background-color: slategray;
    }
    .mat-form-field-required-marker {
      color: slategray;
    }
  }

  //Focus
  .mat-form-field.mat-focused {
    .mat-form-field-label {
      color: #ff884d;
    }
    .mat-form-field-ripple {
      background-color: #ff884d;
    }
    .mat-form-field-required-marker {
      color: #ff884d;
    }
    .mat-input-element {
      color: #ff884d;
    }
  }

  //Error
  .mat-form-field.mat-form-field-invalid {
    .mat-input-element {
      color: #ff33cc;
    }
    .mat-form-field-label {
      color: #ff33cc;
      .mat-form-field-required-marker {
        color: #ff33cc;
      }
    }
    .mat-form-field-ripple {
      background-color: #ff33cc;
    }
  }