Breaking

Post Top Ad

Your Ad Spot

viernes, 18 de mayo de 2018

Cambiar color del placeholder con CSS

Ejemplo para cambiar el color (en este caso solamente lo pondremos azul, pero se podrían dar más estilo: font-size, text-transform, etc.) del atributo Placeholder de un input o textarea de nuestros formularios con CSS.

Resultado de imagen para css

El placeholder es el texto de ayuda que se muestra en los campos de un formulario. Por defecto es de color gris, pero según el estilo de nuestro página es posible que queramos cambiarlo.
Teniendo un input con el placeholder:

<body>
<p>Cambiar el color del placeholder:</p>
<input type="text" placeholder="Texto con placeholder azul">
</body>

Cambiaremos el color del mismo mediante CSS. Para ello debemos utilizar el pseudo-elemento ::placeholder.
Firefox por defecto le da una menor opacidad. Para remediarlo le asignamos el máximo (opacity: 1;).

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: #003870;
opacity: 1; /* Firefox */
}

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #003870;
opacity: 1;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #003870;
}

::-ms-input-placeholder { /* Microsoft Edge */
color: #003870;
}

No hay comentarios.:

Publicar un comentario

Post Top Ad

Your Ad Spot

Páginas