Lo ::placeholderpseudo elemento (o una pseudo classe, in alcuni casi, a seconda dell'implementazione del browser) consente di definire lo stile del testo segnaposto di un elemento del modulo. Come in, il testo impostato con l' placeholderattributo:
Puoi modellare il testo sulla maggior parte dei browser con questa infarinatura di selettori con prefisso del fornitore:
::-webkit-input-placeholder ( /* Chrome/Opera/Safari */ color: pink; ) ::-moz-placeholder ( /* Firefox 19+ */ color: pink; ) :-ms-input-placeholder ( /* IE 10+ */ color: pink; ) :-moz-placeholder ( /* Firefox 18- */ color: pink; )Avviso importante: questa sintassi non è standard, quindi tutta la follia di denominazione. Non appare affatto nelle specifiche. :placeholder-shownè standard, e anche gli autori delle specifiche sembrano pensare ::placeholderche sarà la versione standardizzata.
Come ogni psuedo, puoi assegnarlo a elementi specifici secondo necessità, come:
input(type="email").big-dog::-webkit-input-placeholder ( color: orange; )Demo
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).
Nota 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:
: segnaposto-mostrato, essendo una pseudo-classe, deve selezionare un elemento esistente - seleziona l'input ogni volta che sei nello stato di visualizzazione del segnaposto. Lo pseudo-elemento :: placeholder racchiude il testo segnaposto effettivo.
Elemento o classe?
Questa funzionalità non è standardizzata. Ciò significa che ogni browser ha un'idea diversa su come dovrebbe funzionare.
Firefox originariamente lo implementava come una pseudo classe, ma lo ha modificato per una serie di motivi. Per farla breve, non puoi fare tanto con una pseudo classe.
Ad esempio, se vuoi cambiare il colore del testo quando l'input è focalizzato. Usereste un selettore come input:focus::placeholder, cosa che non sareste in grado di fare con una pseudo classe (non si impilano allo stesso modo).
IE10 lo supporta come una pseudo classe, piuttosto che come un elemento. Tutti gli altri hanno implementato uno pseudo elemento.
Colore segnaposto Firefox
Potresti notare come in Firefox il colore del segnaposto appare sbiadito rispetto ad altri browser. Nell'immagine sotto, Firefox 43 è mostrato a sinistra mentre Chrome 47 è mostrato a destra:
Questo perché, per impostazione predefinita, tutti i segnaposto in Firefox hanno un valore di opacità applicato, quindi per risolvere questo problema dobbiamo reimpostare quel valore:
::-moz-placeholder ( opacity: 1; )Puoi vedere di più provando questa demo in Firefox.
Stili supportati
Lo pseudo elemento supporta lo stile di queste proprietà:
fontproprietàcolorbackgroundproprietàword-spacingletter-spacingtext-decorationvertical-aligntext-transformline-heighttext-indentopacity
La pseudo classe supporta anche la maggior parte (se non tutte) di queste proprietà, ma non è così flessibile per i motivi descritti sopra.
Supporto del 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 |
|---|---|---|---|---|
| 57 | 19 * | No | 79 | 10.1 |
Mobile / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.3 |
Proprietà correlate
Almanacco il 22 maggio 2020: segnaposto mostrato
input:placeholder-shown ( border: 5px solid red; ) 
Geoff Graham