
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:
- las especificaciones solo tienen
:placeholder-shown
y no::placeholder
: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 |