: marcador de posición mostrado | Programar Plus

El :placeholder-shown pseudo-clase selecciona el elemento de entrada en sí cuando existe 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

Basado en texto <input>sy el <textarea> la entrada puede 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:

<label for="school">School Name:</label>
<input placeholder="Forest Hills Example High School" type="text" name="school" id="school">

La diferencia entre :placeholder-shown y ::placeholder

:placeholder-shown es para seleccionar la entrada en sí cuando se muestra el texto de su marcador de posición. Opuesto a ::placeholder que aplica estilo al texto del marcador de posición.

Aquí hay un diagrama:

Encontré esto muy confuso como:

  1. las especificaciones solo tienen :placeholder-shown y no ::placeholder
  2. :placeholder-shown aún puede afectar el estilo del texto del marcador de posición, ya que es un elemento principal (por ejemplo, tamaño de fuente).

Tenga en cuenta que :placeholder-shown es un pseudo-clase (es un elemento en un estado particular) y ::placeholder es un pseudo-elemento (algo visible que no está realmente en el DOM). Distinguible por dos puntos simples o 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 ::placeholder El pseudoelemento envuelve el texto del marcador de posición real.

Si necesita diseñar el texto del marcador de posición

Usar ::placeholder (en realidad, use todos los prefijos de proveedores locos para ello) que hemos detallado en el Almanaque aquí.

Más información

  • Selectores Nivel 4 Espec.

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

Escritorio

Cromo Firefox ES DECIR Borde Safari
47 51 11 * 79 9

Móvil / Tableta

Android Chrome Android Firefox Androide Safari de iOS
96 95 96 9.0-9.2