Het ::placeholderpseudo-element (of een pseudo-klasse, in sommige gevallen, afhankelijk van de browserimplementatie) stelt u in staat de tijdelijke aanduiding-tekst van een formulierelement op te maken. Zoals in, de tekst ingesteld met het placeholderattribuut:
U kunt die tekst in de meeste browsers opmaken met deze paar selectors met voorvoegsels van leveranciers:
::-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; )Belangrijke waarschuwing: deze syntaxis is niet standaard, dus alle naamgevingsgekte. Het verschijnt helemaal niet in de specificatie. :placeholder-shownis standaard, en zelfs spec-auteurs schijnen te denken ::placeholderdat dit de gestandaardiseerde versie zal zijn.
Zoals elke psuedo, kunt u deze naar behoefte op specifieke elementen richten, zoals:
input(type="email").big-dog::-webkit-input-placeholder ( color: orange; )Demo
Het verschil tussen :placeholder-shownen::placeholder
:placeholder-shownis voor het selecteren van de invoer zelf wanneer de tijdelijke aanduiding-tekst wordt weergegeven. In tegenstelling tot ::placeholderwelke stijlen de plaatsaanduidingstekst.
Hier is een diagram:
Ik vond dit hoogst verwarrend omdat:
- de specificaties hebben alleen
:placeholder-shownen niet::placeholder :placeholder-shownkan nog steeds de stijl van de tijdelijke aanduiding-tekst beïnvloeden, aangezien het een bovenliggend element is (bijv. font-size).
Merk op dat het :placeholder-showneen pseudo- klasse is (het is een element in een bepaalde staat) en ::placeholdereen pseudo- element is (een zichtbaar ding dat niet echt in de DOM staat). Te onderscheiden door enkele versus dubbele dubbele punten.
Tab Atkins heeft het via e-mail voor mij opgehelderd:
: placeholder-shown, zijnde een pseudo-class, moet een bestaand element selecteren - het selecteert de invoer wanneer je in de placeholder-show staat. Het :: placeholder pseudo-element omsluit de daadwerkelijke placeholder-tekst.
Element of klasse?
Deze functionaliteit is niet gestandaardiseerd. Dat betekent dat elke browser een ander idee heeft over hoe het zou moeten werken.
Firefox implementeerde dit oorspronkelijk als een pseudo-klasse, maar veranderde het om een aantal redenen. Om een lang verhaal kort te maken, je kunt niet zoveel doen met een pseudoklas.
Als u bijvoorbeeld de kleur van de tekst wilt wijzigen wanneer de invoer is gefocust. Je zou een selector zoals gebruiken input:focus::placeholder, wat je niet zou kunnen doen met een pseudo-klasse (ze stapelen niet op dezelfde manier).
IE10 ondersteunt dit als een pseudoklasse in plaats van een element. Alle anderen hebben een pseudo-element geïmplementeerd.
Kleur van tijdelijke aanduiding voor Firefox
U zult wellicht opmerken hoe in Firefox de kleur van de tijdelijke aanduiding er vervaagd uitziet in vergelijking met andere browsers. In de onderstaande afbeelding wordt Firefox 43 aan de linkerkant weergegeven, terwijl Chrome 47 aan de rechterkant wordt weergegeven:
Dit komt doordat standaard op alle tijdelijke aanduidingen in Firefox een ondoorzichtigheidswaarde wordt toegepast, dus om dit op te lossen, moeten we die waarde opnieuw instellen:
::-moz-placeholder ( opacity: 1; )U kunt meer zien door deze demo in Firefox te testen.
Ondersteunde stijlen
Het pseudo-element ondersteunt de vormgeving van deze eigenschappen:
fonteigendommencolorbackgroundeigendommenword-spacingletter-spacingtext-decorationvertical-aligntext-transformline-heighttext-indentopacity
De pseudo-klasse ondersteunt de meeste (zo niet alle) van deze eigenschappen ook, maar is niet zo flexibel om de hierboven uiteengezette redenen.
Browser-ondersteuning
Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.
Bureaublad
| Chrome | Firefox | D.W.Z | Rand | Safari |
|---|---|---|---|---|
| 57 | 19 * | Nee | 79 | 10.1 |
Mobiel / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.3 |
Gerelateerde eigenschappen
Almanac op 22 mei 2020: tijdelijke aanduiding weergegeven
input:placeholder-shown ( border: 5px solid red; ) 
Geoff Graham