::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>
.
::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
<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.
- WebAIM: Comprobador de contraste de color
- MDN Entendiendo WCAG, Explicaciones del lineamiento 1.4
- Entendiendo críterios exitósos 1.4.3 | W3C Entendiendo WCAG 2.0
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
Especificaciones
Specification |
---|
CSS Pseudo-Elements Module Level 4 # placeholder-pseudo |
Compatibilidad con navegadores
BCD tables only load in the browser
Ver también
- La pseudo-clase
:placeholder-shown
provee estilos a un elemento que tiene un texto provisional activo. - Elementos HTML relacionados:
<input>
,<textarea>
- Formularios HTML