Az ::placeholderál elem (vagy egy ál osztály, bizonyos esetekben, a böngésző megvalósításától függően) lehetővé teszi egy űrlap elem helyőrző szövegének stílusát. Akárcsak itt, az placeholderattribútummal ellátott szövegkészlet :
Ezt a szöveget a legtöbb böngészőben stílusozhatja a szállító előtagú szelektorok ilyen szétszóródásával:
::-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; )Fontos figyelmeztetés: ez a szintaxis nem szabványos, így minden elnevezési őrület. Egyáltalán nem jelenik meg a specifikációban. :placeholder-shownszabvány, és úgy tűnik, hogy még a szerzők is úgy gondolják, hogy ::placeholderez lesz a szabványosított változat.
Mint minden psuedo, szükség szerint meghatározott elemekre is kiterjesztheti, például:
input(type="email").big-dog::-webkit-input-placeholder ( color: orange; )Demó
A különbség a :placeholder-shownés között::placeholder
:placeholder-showna bemenet kiválasztására szolgál, amikor a helyőrző szövege megjelenik. A ::placeholderhelyőrző szöveggel szemben, mely stílusokkal ellentétben .
Itt egy ábra:
Ezt nagyon zavarónak találtam, mivel:
- a specifikációknak csak van
:placeholder-shownés nincs::placeholder :placeholder-showntovábbra is befolyásolhatja a helyőrző szöveg stílusát, mivel ez egy szülő elem (pl. betűméret).
Vegye figyelembe, hogy :placeholder-shownez egy ál osztály (ez egy elem egy adott állapotban) és ::placeholderegy ál elem (egy látható dolog, ami valójában nincs a DOM-ban). Megkülönböztethető egy-kettő kettősponttal.
Tab Atkins számomra e-mailben tisztázta:
: a helyőrző-mutatott, mivel ál-osztály, ki kell választania egy meglévő elemet - kiválasztja a bemenetet, amikor a helyőrző-megjelenítő állapotban van. A :: helyőr pszeudo-elem beburkolja a tényleges helyőrző szöveget.
Elem vagy osztály?
Ez a funkció nincs szabványosítva. Ez azt jelenti, hogy minden böngészőnek más és más elképzelése van a működéséről.
A Firefox ezt eredetileg álosztályként valósította meg, de sok ok miatt megváltoztatta. Hogy rövid legyen egy rövid történet, nem tehetsz annyit egy álórával.
Például, ha a bemenet fókuszálásakor meg akarja változtatni a szöveg színét. Olyan választót használna, mint egy input:focus::placeholder, amelyet nem tudna megtenni egy ál osztálynál (ezek nem ugyanúgy rakódnak össze).
Az IE10 ezt ál osztályként támogatja, nem pedig elemként. Mindenki más megvalósított egy álelemet.
Firefox helyőrző színe
Észreveheti, hogy a Firefoxban a helyőrző színe elhalványult más böngészőkhöz képest. Az alábbi képen a Firefox 43 látható a bal oldalon, míg a Chrome 47 a jobb oldalon:
Ennek oka, hogy alapértelmezés szerint a Firefox összes helyőrzőjére vonatkozik egy fedettségérték, ezért ennek kijavításához vissza kell állítanunk ezt az értéket:
::-moz-placeholder ( opacity: 1; )Ha többet szeretne látni, tesztelje ezt a bemutatót a Firefoxban.
Támogatott stílusok
Az ál elem támogatja a következő tulajdonságok stílusát:
fonttulajdonságaitcolorbackgroundtulajdonságaitword-spacingletter-spacingtext-decorationvertical-aligntext-transformline-heighttext-indentopacity
Az álosztály ezen tulajdonságok többségét (ha nem is az összes) támogatja, de a fent vázolt okok miatt nem annyira rugalmas.
Böngésző támogatás
Ez a böngésző támogatási adat a Caniuse cégtől származik, amely részletesebben szerepel. Egy szám azt jelzi, hogy a böngésző támogatja az adott és újabb verziók szolgáltatásait.
Asztal
| Króm | Firefox | AZAZ | Él | Szafari |
|---|---|---|---|---|
| 57 | 19 * | Nem | 79 | 10.1 |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81. | 10.3 |
Kapcsolódó tulajdonságok
Almanach 2020. május 22-én: helyőrző-látható
input:placeholder-shown ( border: 5px solid red; ) 
Geoff Graham