:: kohatäide - CSS-trikid

Anonim

::placeholderPseudo element (või pseudo-klassi, mõnel juhul sõltuvalt brauseri rakendamise) võimaldab stiilis kohatäitetekst vormi element. Nagu ka tekstis, määratakse placeholderatribuudiga tekst :

Selle müüja eesliidetega valijate valamise abil saate selle teksti enamikus brauserites stiilida:

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

Oluline hoiatus: see süntaks on ebastandardne, seega kogu nimetamise hullus. See ei ilmu spetsifikatsioonis üldse. :placeholder-shownon standardne ja isegi spetsifikatsioonide autorid näivad olevat ::placeholderstandardiseeritud versioon.

Nagu iga psuedo, saate seda vajaduse korral reguleerida konkreetsete elementidega, näiteks:

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

Demo

Erinevus :placeholder-shownja::placeholder

:placeholder-shownon sisendi enda valimiseks, kui selle kohatäite teksti näidatakse. Erinevalt sellest, ::placeholdermillistes stiilides kohatäite tekst.

Siin on diagramm:

Ma leidsin, et see on väga segane, kuna:

  1. spetsifikatsioonidel on ainult :placeholder-shownja mitte::placeholder
  2. :placeholder-shown võib ikkagi mõjutada kohatäite teksti stiili, kuna see on vanemelement (nt fondi suurus).

Pange tähele, et :placeholder-shownon pseudo -klassi (see element teatud osariik) ja ::placeholderon pseudo element (nähtav asi, mis ei ole tegelikult DOM). Eristatav ühe- või kahekordse jämesoolega.

Tab Atkins lahendas selle minu jaoks e-posti teel:

: kohatäide-kuvatud, olles pseudoklass, peab valima olemasoleva elemendi - see valib sisendi alati, kui viibite kohatäite kuvamise olekus. :: kohahoidja pseudoelement ümbritseb tegeliku kohatäite teksti.

Element või klass?

See funktsioon pole standardiseeritud. See tähendab, et igal brauseril on erinev idee selle kohta, kuidas see peaks toimima.

Firefox rakendas seda algselt pseudoklassina, kuid muutis seda mitmel põhjusel. Pika jutu lühidaks tegemiseks ei saa pseudotunniga nii palju teha.

Näiteks kui soovite teksti värvi muuta, kui sisend on fokuseeritud. Te kasutaksite sellist valijat input:focus::placeholder, mida te pseudoklassi puhul teha ei saaks (need ei virna samamoodi).

IE10 toetab seda pigem pseudoklassi kui elemendina. Kõik teised on rakendanud pseudoelemendi.

Firefoxi kohahoidja värv

Võib-olla märkate, kuidas Firefoxis on kohatäite värv teiste brauseritega võrreldes tuhmunud. Alloleval pildil on Firefox 43 vasakul, paremal aga Chrome 47:

Chrome'i versioon on ideaalis stiil, mida tahaksime kõikjal näha.

Selle põhjuseks on see, et vaikimisi on Firefoxi kõikidele kohatäitjatele rakendatud läbipaistmatuse väärtus, nii et selle parandamiseks peame selle väärtuse lähtestama:

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

Lisateavet saate selle demo Firefoxis testimisega.

Toetatud stiilid

Pseudoelement toetab nende omaduste kujundamist:

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

Pseudoklass toetab ka enamikku (kui mitte kõiki) neist omadustest, kuid pole ülaltoodud põhjustel nii paindlik.

Brauseri tugi

Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.

Töölaud

Chrome Firefox IE Edge Safari
57 19 * Ei 79 10.1

Mobiil / tahvelarvuti

Android Chrome Android Firefox Android iOS-i Safari
88 85 81 10.3

Seotud omadused

Almanahh 22. mail 2020

: kuvatakse kohatäide

input:placeholder-shown ( border: 5px solid red; ) Geoff Graham