1

Estoy intentando modificar el color del borde inferior de un input de la librería material design que ofrece Angular (Enlace) por el blanco y no hay manera. He probado de editar el md-input-container y clases internas pero nada.

introducir la descripción de la imagen aquí

<md-toolbar>
    <md-icon>account_box</md-icon>
    <span>Usuarios</span>
    <span class="toolbar-spacer"></span>
    <md-input-container>
        <input mdInput #filter type="search">
        <span mdSuffix>
            <md-icon>search</md-icon>
        </span>
    </md-input-container>
    <md-icon>add</md-icon>
</md-toolbar>
3
  • ¿Has intentado modificando .mat-input-ripple?
    – Marcos
    el 28 jul. 2017 a las 15:39
  • Sí, pero no lo modifica.
    – dddenis
    el 28 jul. 2017 a las 15:46
  • ¿Como lo has hecho? Acá una demo (ver index.html)
    – Marcos
    el 28 jul. 2017 a las 15:59

1 respuesta 1

2

Probablemente la clase de css que quieres modificar es "mat-input-underline"

lo que puedes hacer para cambiar el color es hacer lo siguiente:

.mat-input-underline{
    color: blue;
}

Esto cambiará el borde inferior a color azul, adicionalmente si quieres cambiar el color del borde cuando el input tiene focus, debes cambiar lo siguiente:

.mat-input-ripple {
    background-color: green;
}

debo aclarar que estas lineas de css cambiarían todos tus inputs a esos colores, si solo quieres que un input tenga ese color debes crear el selector correcto (probablemente con el ID).

Espero que te sirva, saludos.

1
  • Gracias por la respuesta, necesitaba utilizar el selector >>> para cambiarlo forzadamente.
    – dddenis
    el 29 jul. 2017 a las 22:23

Tu Respuesta

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

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