Cuando utilizas formularios en una página web, el texto que aparece dentro de los campos antes de que el usuario escriba se denomina placeholder, y puedes modificar fácilmente su aspecto utilizando CSS.
El pseudoelemento ::placeholder te permite personalizar ese texto para adaptarlo al diseño de tu web, mejorar su legibilidad y mantener una estética coherente con el resto de elementos del formulario.
En este tutorial aprenderás a cambiar el color, tamaño, tipografía, grosor, opacidad y otros estilos de un placeholder mediante diferentes ejemplos de CSS que puedes adaptar directamente a tu proyecto.
¿Qué es un placeholder en HTML?
Un placeholder es un texto provisional que aparece dentro de determinados campos de un formulario para indicarte qué información debes introducir.
Por ejemplo, puedes utilizarlo dentro de un campo de correo electrónico para mostrar un texto como «Introduce tu correo electrónico» antes de que el visitante escriba.
<input type="email" placeholder="Introduce tu correo electrónico">
Cuando empiezas a escribir dentro del campo, el texto del placeholder desaparece automáticamente y deja paso al contenido introducido.
El placeholder puede utilizarse en elementos como input y textarea, siendo especialmente habitual en formularios de contacto, formularios de registro, buscadores y páginas de inicio de sesión.
¿Qué es ::placeholder en CSS?
El pseudoelemento ::placeholder permite seleccionar específicamente el texto definido mediante el atributo placeholder de determinados controles de formulario.
En lugar de modificar todo el campo, puedes utilizar este selector para aplicar estilos únicamente al texto provisional que aparece en su interior.
La sintaxis más sencilla es la siguiente:
::placeholder {
color: #777777;
}
Con este código estás indicando al navegador que todos los placeholders compatibles de la página deben utilizar el color #777777.
Puedes consultar más detalles sobre su funcionamiento en la documentación de ::placeholder de MDN.
Cómo cambiar el color de un placeholder con CSS
Una de las modificaciones más frecuentes consiste en cambiar el color del placeholder para conseguir que encaje mejor con el diseño del formulario.
Puedes hacerlo utilizando la propiedad color:
::placeholder {
color: #999999;
}
Este código aplicará un tono gris a los placeholders de los campos compatibles de tu página.
Si utilizas un formulario sobre un fondo oscuro, por ejemplo, podrías emplear un color claro:
::placeholder {
color: #ffffff;
}
Es importante elegir un color que permita distinguir el placeholder sin confundirlo con el texto que introduce realmente el usuario.
Cómo cambiar el tamaño del placeholder
También puedes modificar el tamaño del texto utilizando la propiedad font-size.
::placeholder {
font-size: 14px;
}
De esta manera puedes hacer que las indicaciones del formulario sean ligeramente más pequeñas o más grandes dependiendo del diseño.
Si tus campos utilizan textos de 16px, por ejemplo, establecer el placeholder en 14px puede generar una pequeña diferencia visual sin perjudicar su legibilidad.
Cómo cambiar la fuente del placeholder
Puedes utilizar font-family para asignar una familia tipográfica diferente al placeholder.
::placeholder {
font-family: Arial, sans-serif;
}
También puedes utilizar cualquier fuente instalada o cargada previamente en tu página web.
Por ejemplo, si utilizas Google Fonts podrías aplicar una tipografía personalizada siempre que la fuente se haya cargado correctamente antes de utilizarla.
::placeholder {
font-family: "Roboto", sans-serif;
}
Puedes encontrar diferentes familias tipográficas en Google Fonts si quieres experimentar con el diseño de tus formularios.
Cómo cambiar la opacidad del placeholder
Los navegadores pueden mostrar el placeholder con cierta transparencia, por lo que en algunas situaciones el color elegido puede parecer más claro de lo esperado.
Puedes controlar este comportamiento mediante la propiedad opacity.
::placeholder {
color: #555555;
opacity: 1;
}
Al utilizar opacity: 1 consigues que el color definido se muestre con su opacidad completa.
También puedes reducirla deliberadamente:
::placeholder {
color: #000000;
opacity: 0.5;
}
En este caso el placeholder será más transparente, aunque conviene comprobar que sigue siendo suficientemente fácil de leer.
Cómo poner el placeholder en negrita
Si quieres destacar las indicaciones del formulario, puedes cambiar el grosor de la tipografía con font-weight.
::placeholder {
font-weight: 600;
}
También podrías utilizar valores como 400, 500, 700 o bold, dependiendo de la fuente utilizada en tu página.
Un grosor excesivamente alto puede hacer que el placeholder parezca texto introducido por el usuario, por lo que normalmente resulta recomendable mantener una diferencia visual entre ambos estados.
Cómo poner el placeholder en cursiva
Otra posibilidad es aplicar font-style para mostrar el placeholder en cursiva.
::placeholder {
font-style: italic;
}
Este recurso puede resultar útil cuando quieres diferenciar claramente una indicación orientativa del contenido definitivo del campo.
Cómo aplicar varios estilos al mismo tiempo
No necesitas crear una regla independiente para cada propiedad, ya que puedes combinar todos los estilos del placeholder dentro del mismo selector.
::placeholder {
color: #777777;
font-size: 14px;
font-family: Arial, sans-serif;
font-weight: 400;
font-style: italic;
opacity: 1;
}
Con este ejemplo estás modificando simultáneamente color, tamaño, fuente, grosor, estilo y opacidad.
Esta suele ser la solución más práctica cuando quieres crear una apariencia uniforme para todos los formularios de una página web.
Cómo cambiar solamente el placeholder de un campo
Utilizar ::placeholder sin ningún selector adicional afecta a todos los placeholders compatibles de la página.
Si quieres modificar solamente un campo concreto, puedes añadir una clase HTML.
<input class="campo-email" type="email" placeholder="Tu correo electrónico">
Después puedes seleccionar únicamente esa clase desde CSS:
.campo-email::placeholder {
color: #0066cc;
}
De esta forma solamente cambiará el placeholder del campo que tenga la clase campo-email.
Cómo cambiar el placeholder de inputs y textarea
También puedes aplicar estilos diferentes dependiendo del tipo de elemento del formulario.
Para modificar exclusivamente los placeholders de los elementos input puedes utilizar:
input::placeholder {
color: #777777;
}
Para los campos de texto creados con textarea puedes utilizar:
textarea::placeholder {
color: #999999;
}
Esta separación resulta especialmente interesante cuando tus campos de una línea y áreas de texto tienen diseños diferentes.
Cómo cambiar el estilo de un placeholder paso a paso
Si quieres aplicar este cambio rápidamente en tu página web, puedes seguir estos pasos:
- 🔎 Localiza el campo que contiene el atributo
placeholderdentro de tu formulario. - 🎨 Decide qué propiedades quieres modificar, como color, tamaño, fuente, grosor u opacidad.
- 🧩 Añade el selector
::placeholdera tu archivo CSS o a la sección de CSS personalizado de tu web. - ✏️ Introduce dentro del selector las propiedades CSS que quieras aplicar.
- 💾 Guarda los cambios realizados en tu hoja de estilos.
- 🔄 Recarga la página y comprueba el resultado en diferentes campos del formulario.
- 📱 Comprueba también el formulario desde dispositivos móviles para asegurarte de que el placeholder continúa siendo legible.
Ejemplo completo de personalización
Supongamos que quieres conseguir un placeholder gris, ligeramente pequeño y en cursiva para los campos de un formulario.
Puedes utilizar este código:
input::placeholder,
textarea::placeholder {
color: #777777;
font-size: 14px;
font-style: italic;
font-weight: 400;
opacity: 1;
}
Este ejemplo afecta tanto a campos input como a elementos textarea, por lo que resulta adecuado para conseguir un estilo uniforme.
Si solamente quieres aplicarlo a un formulario concreto, es preferible añadir primero una clase identificadora al contenedor del formulario.
.formulario-contacto input::placeholder,
.formulario-contacto textarea::placeholder {
color: #777777;
font-size: 14px;
}
Así evitarás modificar accidentalmente otros formularios, buscadores o campos de registro existentes en la misma página.
Tabla resumen de propiedades para ::placeholder
| Propiedad CSS | Función | Ejemplo |
|---|---|---|
color | Cambia el color del placeholder | color: #777; |
font-size | Modifica el tamaño del texto | font-size: 14px; |
font-family | Cambia la tipografía | font-family: Arial; |
font-weight | Modifica el grosor | font-weight: 600; |
font-style | Permite utilizar cursiva | font-style: italic; |
opacity | Controla la transparencia | opacity: 1; |
letter-spacing | Cambia la separación entre letras | letter-spacing: 1px; |
text-transform | Modifica mayúsculas y minúsculas | text-transform: uppercase; |
Cómo cambiar el espaciado entre letras
También puedes utilizar letter-spacing para aumentar o reducir la distancia existente entre los caracteres del placeholder.
::placeholder {
letter-spacing: 1px;
}
Este efecto puede funcionar bien en formularios minimalistas, aunque un espaciado demasiado elevado puede dificultar la lectura del texto.
Cómo poner el placeholder en mayúsculas
La propiedad text-transform permite cambiar visualmente las mayúsculas y minúsculas del placeholder.
::placeholder {
text-transform: uppercase;
}
Aunque el atributo HTML contenga el texto "Introduce tu nombre", el navegador podrá mostrarlo visualmente como INTRODUCE TU NOMBRE.
También puedes utilizar valores como lowercase o capitalize dependiendo del efecto que quieras conseguir.
Compatibilidad de ::placeholder con los navegadores
El pseudoelemento ::placeholder dispone actualmente de una compatibilidad muy amplia en los navegadores modernos.
En proyectos destinados a navegadores especialmente antiguos podrías encontrar implementaciones con prefijos específicos, aunque para la mayoría de sitios actuales suele ser suficiente utilizar la sintaxis estándar.
Si quieres comprobar la compatibilidad antes de aplicar una determinada característica CSS, puedes consultar Can I Use.
Mantener una sintaxis CSS sencilla también facilita que tus formularios funcionen correctamente en Chrome, Firefox, Safari, Edge y navegadores móviles.
Consejos para diseñar correctamente un placeholder
🎨 Utiliza un color suficientemente contrastado respecto al fondo para que el visitante pueda leer las indicaciones sin esfuerzo.
👁️ Evita utilizar una opacidad excesivamente baja, porque un placeholder demasiado tenue puede convertirse en un problema de legibilidad.
📏 Mantén un tamaño razonable y evita reducir considerablemente el placeholder respecto al texto normal del formulario.
✏️ Utiliza el placeholder como una indicación complementaria y no como sustituto permanente de las etiquetas del formulario.
📱 Comprueba siempre el resultado tanto en ordenador como en móvil, especialmente si utilizas tamaños de fuente personalizados.
🧩 Utiliza clases específicas cuando necesites modificar solamente determinados formularios para evitar que una regla global afecte a otros campos de tu página.
Conclusión
El pseudoelemento ::placeholder es una forma rápida y sencilla de personalizar el texto provisional de los formularios sin modificar el contenido que introduce el usuario.
Con unas pocas líneas de CSS puedes cambiar color, tamaño, fuente, grosor, cursiva, opacidad, espaciado y transformación del texto, consiguiendo que los campos encajen mucho mejor con el diseño general de tu web.
Si quieres controlar únicamente determinados campos, combina clases CSS con ::placeholder para aplicar los estilos exactamente donde los necesites.
Dominar este pequeño selector te permitirá crear formularios más cuidados, coherentes y fáciles de utilizar sin necesidad de JavaScript ni modificaciones complejas.
