1

Tengo un problema con respecto a cambiar el color de los placeholder en un componente:

Una parte de los template HTML es así:

<div class="col-md-3">
<mat-form-field class="mat-form-field-fluid">
<input  matInput placeholder="Orden" formControlName="Orden" readonly>
<mat-error> Orden <strong>es obligatorio.</strong> </mat-error>
</mat-form-field>
</div>

Y lo que uso en SCSS es lo siguiente:

::ng-deep .mat-input-element::placeholder{
    color: green;
}

Lo que busco es esto:

foto2

Pero no logro cambios, sigue manteniéndose en un color gris cuando realmente lo quiero en verde; espero puedan ayudarme.

1 respuesta 1

1

Para cambiar el color tienes que aplicarlo en el label, seria de la siguiente forma:

::ng-deep .mat-form-field-label {
    color: #F60 !important;
}

Siendo #F60 color naranja, tendría que verse algo así :

introducir la descripción de la imagen aquí

O aplicando un verde se vería así:

introducir la descripción de la imagen aquí


Para el caso en el que necesites aplicarlo en un solo input seria de la siguiente forma:

En el HTML:

<mat-form-field id='mi-componente'>
    <input matInput type="text" placeholder="Orden">
</mat-form-field>

En el CSS:

#mi-componente::ng-deep .mat-form-field-label {
    color: #F60 !important;
}
3
  • Es correcto, la solución funciona, sin embargo esto se aplica para todo el proyecto y no solo para el componente actual; mi solución para que se aplique solo en el componente fue hacer uso de un <mat-label style="color:green"></mat-label>. De todas formas, gran respuesta.
    – lsanchezo
    Commented el 6 ene. 2023 a las 15:45
  • También podrías darle un id para especificar, agregaré un ejemplo utilizando un id. Aunque la solución que le diste es muy valida. ;)
    – Israel-ICM
    Commented el 6 ene. 2023 a las 16:01
  • 1
    No tenía ni idea jaja te daría doble respuesta pero no se puede jaja un saludo, gracias nuevamente.
    – lsanchezo
    Commented el 6 ene. 2023 a las 21:02

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.