Cambiar el color de la alfombra

Solución:

Puedes usar CSS simple

 ::ng-deep .mat-focused .mat-form-field-label {
  /*change color of label*/
  color: green !important;
 }

 ::ng-deep.mat-form-field-underline {
  /*change color of underline*/
  background-color: green !important;
} 

::ng-deep.mat-form-field-ripple {
 /*change color of underline when focused*/
 background-color: green !important;;
}

o crear un tema personalizado para aplicar. Aquí está el artículo, cómo crear temas personalizados

https://alligator.io/angular/angular-material-custom-theme/

Hay dos clases, .mat-formulario-campo-etiqueta para la etiqueta de texto y .mat-formulario-campo-subrayado para el subrayado. Anule estas dos clases dándoles los estilos deseados.

Aquí hay un enlace de trabajo

Gracias.

Si pones el formulario dentro de un div y le das una clase y luego usas :: ng-deep className {…} no anularás todos los “mat-form-field” en la aplicación.

::ng-deep .create-account-form {
  .mat-focused .mat-form-field-ripple {
    /*change color of underline when focused*/
    background-color: @color-blue !important;
  }
  .mat-focused .mat-form-field-label {
    /*change color of label when focused*/
    color: @color-blue !important;
   }
}

<form class="create-account-form">
      <mat-form-field class="input-size">
        <input type="email" mdInput formControlName="email" placeholder="Email" required matInput>
      </mat-form-field>
</form>

---

---

Utiliza Nuestro Buscador