¿Cómo cambiar el color a un placeholder en CSS?

¿Cómo cambiar el color a un placeholder en CSS?
Escrito por: Cesar F. Miranda Salcedo
enero 20, 2021

Por defecto un placeholder es de color gris, pero si en algunas ocasiones nos gustaría que tuviera otro color ya sea por el diseño que tenemos en nuestro formulario o por cualquier otra razón, aquí te diremos como hacerlo.

¿Qué es un placeholder?

Un placeholder o marcador de posición es la etiqueta de texto que aparece dentro de alguno de los campos del formulario ya sea en un <input> o un <textarea>.

Su función es indicarle a los usuarios que información requiere en cada uno de los campos, por ejemplo en la siguiente imagen el placeholder son las preguntas: ¿Cómo te llamas? y ¿A qué email enviamos el presupuesto?

Primero es necesario tener en nuestro código de HTML un <input> o un <texarea> y dentro de tu <input> o <textarea> es necesario agregar el pseudo-elemento placeholder.

<div>
  <label for="name">Nombre:</label>
  <input type="text" placeholder="Nombre" name="name" id="name" />
</div>

<div>
  <label for="lastname">Apellido(s):</label>
  <input type="text" placeholder="Apellido(s)" name="lastname" id="lastname" />
</div>

Posteriormente en tu CSS es necesario escribir el siguiente código, con el fin de que el cambio de color se visualice en los diferentes tipos de navegadores.

::-webkit-input-placeholder {color: #FF000;}
:-moz-placeholder {color #FF0000;}
::-moz-placeholder {color: #FF0000;}
:-ms-input-placeholder {color: #FF0000;}

Aquí te dejamos el código y el resultado para que observes los cambios, de color gris lo cambiamos a color rojo.

See the Pen
Cambio de color de placeholder con css
by Plectro lab (@Plectro-lab)
on CodePen.

Para conseguir que en iOS el placeholder desaparezca cuando haces click en el campo, es necesario lo siguiente:

:focus::-webkit-input-placeholder{color:transparent;}

Para cambiar el color de un placeholder en especifico es:

.mi-input::placeholder { color: red; font-weight: bold; }

Por último…

Es recomendable que el placeholder sea en un color más claro para indicar a los usuarios que es una sugerencia, pero es importante revisar el contraste del color ya que hay personas con diferentes condiciones visuales que podrían no percibirlo.

Sin embargo en UX (experiencia de usuario) el placeholder no es considerado una buena practica. Por la accesibilidad para todos los usuarios, ya que por ejemplo Google no lee los place holder, entonces para una persona con discapacidad visual no es accesible.

Una de las alternativas para no hacer uso de un placeholder es el uso de etiquetas de título ademas de apoyarte con alguna aclaración fuera del campo de formulario, como se muestra en la siguiente imagen.

Ejemplo Js y CSS

 

También te podría interesar…

0 Comments

Submit a Comment

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