La :placeholder-shownpseudoclase selecciona el elemento de entrada en sí cuando existe un texto de marcador de posición en una entrada de formulario. Piense en ello como una buena forma de distinguir entre las entradas que actualmente muestran texto de marcador de posición y las que no lo están.
input:placeholder-shown ( border: 5px solid red; )La idea detrás de los marcadores de posición
Los mensajes de correo electrónico basados en texto y la entrada pueden tener texto de marcador de posición. Es texto que se muestra cuando la entrada está vacía, para sugerir un posible valor. Por ejemplo, un formulario que solicita una escuela puede tener una etiqueta para lo que solicita, pero luego sugerir "Forest Hills Example High School" en el marcador de posición como valor de ejemplo:
School Name: La diferencia entre :placeholder-showny::placeholder
:placeholder-shownes para seleccionar la entrada en sí cuando se muestra su texto de marcador de posición. A diferencia de los ::placeholderestilos del texto del marcador de posición.
Aquí hay un diagrama:
Encontré esto muy confuso como:
- las especificaciones solo tienen
:placeholder-showny no::placeholder :placeholder-shownaún puede afectar el estilo del texto del marcador de posición, ya que es un elemento principal (por ejemplo, tamaño de fuente).
Note que :placeholder-shownes una pseudo- clase (es un elemento en un estado particular) y ::placeholderes un pseudo- elemento (algo visible que no está realmente en el DOM). Distinguible por dos puntos simples y dobles.
Tab Atkins me lo aclaró por correo electrónico:
:placeholder-shown, al ser una pseudoclase, tiene que seleccionar un elemento existente. Selecciona la entrada siempre que se encuentre en el estado de visualización de marcador de posición. El::placeholderpseudoelemento envuelve el texto del marcador de posición real.
Si necesita diseñar el texto del marcador de posición
Use ::placeholder (en realidad, use todos los prefijos de proveedores locos) que hemos detallado en el Almanaque aquí.
Más información
- Selectores Nivel 4 Especificaciones
Soporte del navegador
Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.
Escritorio
| Cromo | Firefox | ES DECIR | Borde | Safari |
|---|---|---|---|---|
| 47 | 51 | 11 * | 79 | 9 |
Móvil / Tablet
| Android Chrome | Android Firefox | Androide | Safari de iOS |
|---|---|---|---|
| 88 | 85 | 81 | 9.0-9.2 |