La :placeholder-shownpseudo-classe seleziona l'elemento di input stesso quando il testo segnaposto esiste in un input del modulo. Consideralo un bel modo per distinguere tra gli input che attualmente mostrano il testo segnaposto da quelli che non lo sono.
input:placeholder-shown ( border: 5px solid red; )L'idea alla base dei segnaposto
I messaggi di testo e l' input possono avere testo segnaposto. È un testo che viene mostrato quando l'input è vuoto, per suggerire un possibile valore. Ad esempio, un modulo che chiede una scuola potrebbe avere un'etichetta per ciò che sta chiedendo, ma poi suggerire "Forest Hills Example High School" nel segnaposto come valore di esempio:
School Name: La differenza tra :placeholder-showne::placeholder
:placeholder-shownserve per selezionare l'input stesso quando viene mostrato il testo segnaposto. Al contrario di ::placeholderquale stile il testo segnaposto.
Ecco un diagramma:
L'ho trovato molto confuso in quanto:
- solo le specifiche hanno
:placeholder-showne non::placeholder :placeholder-shownpuò ancora influenzare lo stile del testo segnaposto, poiché è un elemento genitore (es. dimensione del carattere).
Notare che :placeholder-shownè una pseudo- classe (è un elemento in uno stato particolare) ed ::placeholderè uno pseudo- elemento (una cosa visibile che non è realmente nel DOM). Distinguibile da due punti singoli o doppi.
Tab Atkins me lo ha chiarito tramite e-mail:
:placeholder-shown, essendo una pseudo-classe, deve selezionare un elemento esistente. Seleziona l'input ogni volta che ti trovi nello stato di visualizzazione del segnaposto. Lo::placeholderpseudo-elemento avvolge il testo segnaposto effettivo.
Se devi modellare il testo segnaposto
Usa ::placeholder (in realtà, usa tutti i pazzi prefissi dei fornitori) che abbiamo descritto in dettaglio qui nell'Almanacco.
Maggiori informazioni
- Selettori Livello 4 Spec
Supporto browser
Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.
Desktop
| Cromo | Firefox | IE | Bordo | Safari |
|---|---|---|---|---|
| 47 | 51 | 11 * | 79 | 9 |
Mobile / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 9.0-9.2 |