::placeholder
=============

El pseudo-elemento CSS **`::placeholder`** representa el texto provisional (en-US) 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 itemEjemplos
--------

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

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


```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" />
```


* Los textos provisionales en los campos del formulario son dañinos (Placeholders in Form Fields Are Harmful) — Nielsen Norman Group
### 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

* Greg Whitworth — Cómo usar -ms-high-contrast (How to use -ms-high-contrast)
### 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>`.

* Sugerencias básicas de formularios (MDN Basic form hints)
* Los textos provisionales en los campos del formulario son dañinos (Placeholders in Form Fields Are Harmful) — Nielsen Norman Group
Especificaciones
----------------

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

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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 (en-US)