:: vietos rezervavimo ženklas - CSS-gudrybės

::placeholderPseudo elementas (arba pseudo klasę, kai kuriais atvejais, priklausomai nuo naršyklės įgyvendinimo) leidžia stiliaus rezervuotos vietos tekstą iš formos elementas. Kaip ir teksto rinkinyje su placeholderatributu:

Galite stilizuoti tą tekstą daugelyje naršyklių naudodami šį tiekėjų priešdėlinių selektorių trūkumą:

::-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; )

Svarbus įspėjimas: ši sintaksė yra nestandartinė, taigi ir visas vardų kvailumas. Tai visai nerodoma specifikacijoje. :placeholder-shownyra standartinis, ir atrodo, kad net spec. autoriai mano, kad ::placeholdertai bus standartizuota versija.

Kaip ir bet kurį „psuedo“, pagal poreikį galite pritaikyti jį tam tikriems elementams, pvz .:

input(type="email").big-dog::-webkit-input-placeholder ( color: orange; )

Demonstracija

Skirtumas tarp :placeholder-shownir::placeholder

:placeholder-shownyra skirtas pasirinkti patį įvestį, kai rodomas jo rezervavimo vietos tekstas. Skirtingai nuo to, ::placeholderkurie stiliai yra vietos rezervavimo ženklo tekstas.

Štai schema:

Man tai pasirodė labai painu, nes:

1. specifikacijos turi tik :placeholder-shownir neturi::placeholder
2. :placeholder-shown vis tiek gali paveikti vietos rezervavimo ženklo teksto stilių, nes tai yra pagrindinis elementas (pvz., šrifto dydis).

Atkreipkite dėmesį, kad :placeholder-showntai yra pseudo klasė (tai elementas tam tikroje būsenoje) ir ::placeholderyra pseudo elementas (matomas dalykas, kurio iš tikrųjų nėra DOM). Išskiriami dvitaškiai vienas prieš dvigubą.

Tabas Atkinsas man tai išaiškino el. Paštu:

: rodomas vietos rezervatorius, būdamas pseudo klase, turi pasirinkti esamą elementą - jis pasirenka įvestį, kai esate būsenos rodymo būsenoje. Pseudo-elementas :: rezervuotojas apgaubia faktinį vietos rezervavimo ženklo tekstą.

Elementas ar klasė?

Ši funkcija nėra standartizuota. Tai reiškia, kad kiekviena naršyklė turi skirtingą idėją, kaip ji turėtų veikti.

„Firefox“ iš pradžių tai įgyvendino kaip pseudo klasę, tačiau ją pakeitė dėl daugybės priežasčių. Trumpai tariant, negalima padaryti tiek daug su pseudo klase.

Pvz., Jei norite pakeisti teksto spalvą, kai įvestis yra fokusuota. Naudotumėtės panašiu parinkikliu input:focus::placeholder, kurio negalėtumėte padaryti naudodamiesi pseudo klase (jie nesikrauna vienodai).

IE10 tai palaiko kaip pseudo klasę, o ne kaip elementą. Visi kiti įgyvendino pseudo elementą.

„Firefox“ vietos rezervavimo ženklo spalva

Galite pastebėti, kaip naudojant „Firefox“ vietos rezervavimo ženklo spalva išbluko, palyginti su kitomis naršyklėmis. Žemiau esančiame paveikslėlyje „Firefox 43“ rodomas kairėje, o „Chrome 47“ - dešinėje:

Taip yra todėl, kad pagal numatytuosius nustatymus visoms „Firefox“ vietos rezervavimo ženklams yra taikoma neskaidrumo vertė, todėl norėdami tai išspręsti, turime iš naujo nustatyti šią vertę:

::-moz-placeholder ( opacity: 1; )

Galite pamatyti daugiau, išbandę šią demonstracinę versiją „Firefox“.

Palaikomi stiliai

Pseudo elementas palaiko šių savybių stilių:

• font savybės
• color
• background savybės
• word-spacing
• letter-spacing
• text-decoration
• vertical-align
• text-transform
• line-height
• text-indent
• opacity

Pseudo klasė palaiko ir daugumą (jei ne visas) šių savybių, tačiau nėra tokia lanksti dėl aukščiau nurodytų priežasčių.

Naršyklės palaikymas

Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.

Darbalaukis

„Chrome“	„Firefox“	T.Y	Briauna	„Safari“
57	19 *	Ne	79	10.1

Mobilusis / planšetinis kompiuteris

„Android Chrome“	„Android Firefox“	„Android“	„iOS Safari“
88	85	81	10.3

Susijusios savybės

Almanachas 2020 m. Gegužės 22 d

: rodoma vietos rezervavimo ženklas

input:placeholder-shown ( border: 5px solid red; ) Geoffas Grahamas