::placeholder

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

::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

::placeholder

Ejemplos

Texto rojo

HTML

<input placeholder="Type something here!">

CSS

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

Resultado

Texto verde

HTML

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

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..

<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

Especificación Estado Comentarios
CSS Pseudo-Elements Level 4
La definición de '::placeholder' en esta especificación.
Working Draft Definición inicial

Compatibilidad de los navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
::placeholderChrome Soporte completo 57
Soporte completo 57
Soporte completo 6
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-input-
Edge Soporte completo 12
Prefijado
Soporte completo 12
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-input-
Soporte completo 12
Prefijado
Prefijado Requiere de un prefijo de vendedor : -ms-input-
Firefox Soporte completo 51
Soporte completo 51
Soporte completo 19
Prefijado
Prefijado Requiere de un prefijo de vendedor : -moz-
IE Sin soporte NoOpera Soporte completo 44
Soporte completo 44
Soporte completo 15
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-input-
Safari Soporte completo 10.1
Soporte completo 10.1
Soporte completo 5
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-input-
WebView Android Soporte completo 57
Soporte completo 57
Soporte completo 2
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-input-
Chrome Android Soporte completo 57
Soporte completo 57
Soporte completo 18
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-input-
Firefox Android Soporte completo 51
Soporte completo 51
Soporte completo 19
Prefijado
Prefijado Requiere de un prefijo de vendedor : -moz-
Opera Android Soporte completo 43
Soporte completo 43
Soporte completo 14
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-input-
Safari iOS Soporte completo 10.3
Soporte completo 10.3
Soporte completo 4.3
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-input-
Samsung Internet Android Soporte completo 7.0
Soporte completo 7.0
Soporte completo 1.0
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-input-

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Requiere de un prefijo de proveedor o un de nombre diferente para su uso.
Requiere de un prefijo de proveedor o un de nombre diferente para su uso.

Ver también