::placeholder

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

El pseudo-elemento CSS ::placeholder representa el texto provisional en un elemento <input> o un elemento <textarea>.

css
::placeholder {
  color: blue;
  font-size: 1.5em;
}

Solo el subconjuto de las propiedades CSS que aplican al pseudo-elemento ::first-line puede ser usado en una regla utilizando ::placeholder en su selector.

Nota: En la mayoría de navegadores, la apariencia del texto provisional es traslúcido o un color gris claro por defecto.

Sintáxis

Error: could not find syntax for this item

Ejemplos

Texto rojo

HTML

html
<input placeholder="Type something here!" />

CSS

css
input::placeholder {
  color: red;
  font-size: 1.2em;
  font-style: italic;
}

Resultado

Texto verde

HTML

html
<input placeholder="Type something here..." />

CSS

css
input::placeholder {
  color: green;
}

Result

Preocupaciones por la accesibilidad

Contraste de color

Contraste de color

El texto temporal generalmente tiene un color más claro para indicar que es una sugerencia para el tipo de entrada que será válido, y no es una entrada real de cualquier tipo.

Es importante asegurarse que el radio de contraste entre el color del texto provisional y el fondo de la entrada es lo suficientemente alto para que las personas que experimenten condiciones de visión baja sean capaces de leer el texto mientras también asegurarse que hay diferencia suficiente entre el color del texto temporal y el color del texto de entrada para que los usuarios no confundad el texto provisional con la información de ingreso.

El radio del color de contraste es determinado al comparar la luminosidad entre dos colores. Para cumplir las actuales Pautas de Accesibilidad para el Contenido Web (WCAG), un radio de 4.5:1 es requerido para el contenido de un texto y 3:1 para textos más grandes como encabezados. Un texto grando es definido como 18.66px o mayor en negritas; o 24px o mayor.

Usabilidad

Un texto temporal con suficiente contraste puede ser interpretado como una entrada. El texto provisional podría desaparecer cuando una persona ingresa contenido en un elemento <input>. Ámbas circunstancias pueden interferir con el correcto llenado de un formulario, especialmente para personas con dificultades cogniticas.

Un acercamiento alternativo para proveer información provisional es incluirla afuera del campo de entrada en proximidad visual, entonces usar aria-describedby para programáticamente asociar la entrada <input> con su sugerencia.

Con esta implementación, el contenido de la sugerencia, esta disponible incluso cuando información es ingresada en el campo de entrada, y la entrada aparece libre de una entrada preexistente cuando la página ha cargado. Muchas de las tecnologías de lectores de pantalla usan aria-describedby para leer la sugerencia después de que la etiqueta de la entrada de texto hay sido anunciada, y la persona utilizando el lector de pantalla puede silenciarla si encuentra la información adicional innecesaria..

html
<label for="user-email">Your email address</label>
<span id="user-email-hint" class="input-hint">Example: jane@sample.com</span>
<input
  id="user-email"
  aria-describedby="user-email-hint"
  name="email"
  type="email" />

Modo de alto contraste de Windows

El campo temporal puede aparecer con el mismo estilo como el texto ingresado por el usuario cuando se utiliza el Modo de alto contraste de Windows. Eso hará difícil para algunas personas determinar que contenido ha sido ingresado y que contenido es un texto temporal

Etiquetas

El texto provisional no es un reemplazo para el elemento <label>. Sin una etiqueta que ha sido programaticamente asociada con la entrada usando una combinación de los atributos for y id, tecnología asistiva como los lectores de pantalla no pueden leer los elementos <input>.

Especificaciones

Specification
CSS Pseudo-Elements Module Level 4
# placeholder-pseudo

Compatibilidad con navegadores

BCD tables only load in the browser

Ver también