Saltar al contenido

Cambiar el color del borde en mat-form-field

Nuestro equipo especializado despúes de días de investigación y recopilación de de datos, dimos con la respuesta, esperamos que todo este artículo sea de utilidad para tu plan.

Solución:

Creo que esto cubrirá todo.

// mat-icon-stepper selected color change 
::ng-deep .mat-step-header .mat-step-icon-selected, .mat-step-header .mat-step-icon-state-done, .mat-step-header .mat-step-icon-state-edit 
    background-color: red!important;


//input outline color
::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline 
    color: red!important;
    // opacity: 1!important;


//mat-input focused color
::ng-deep .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick 
    color: red!important;


// mat-input error outline color
::ng-deep .mat-form-field-appearance-outline.mat-form-field-invalid.mat-form-field-invalid .mat-form-field-outline-thick
    color: red!important;
    opacity: 0.8!important;


// mat-input carent color
::ng-deep .mat-input-element 
    caret-color: red!important;


// mat-input error carent color
::ng-deep .mat-form-field-invalid .mat-input-element, .mat-warn .mat-input-element 
    caret-color: red!important;


// mat-label normal state style
::ng-deep .mat-form-field-label 
    color: rgba(0,0,0,.6)!important;
    // color: $mainColor!important;


// mat-label focused style
::ng-deep .mat-form-field.mat-focused .mat-form-field-label 
    color: red!important;


// mat-label error style
::ng-deep .mat-form-field.mat-form-field-invalid .mat-form-field-label 
    color: red!important;

Agrega este CSS a tu formulario-campo-apariencia-ejemplo.css:

/* Border */
.mat-form-field-appearance-outline .mat-form-field-outline 
  color: white;

/* Font color */
input.mat-input-element 
  color: white;

Sin embargo, todavía hay un problema mientras el campo está enfocado.

Para los campos de formulario delineados más nuevos, lo resolvió de esta manera:

::ng-deep 
     .mat-form-field-appearance-outline .mat-form-field-outline 
        color: white;
     
     mat-form-field 
        .mat-hint, input, ::placeholder, .mat-form-field-label 
           color: white;
        
     
  

Aquí puedes ver las reseñas y valoraciones de los lectores

Si estás de acuerdo, eres capaz de dejar una sección acerca de qué te ha gustado de este ensayo.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *