:: vietturis - CSS-triki

Anonim

::placeholderPseido elements (vai pseido klases, atsevišķos gadījumos, atkarībā no pārlūka īstenošanu) ļauj stilizēt viettura tekstu veidlapas elementa. Tāpat kā tekstā, kopa ar placeholderatribūtu:

Varat stilizēt šo tekstu lielākajā daļā pārlūkprogrammu, izmantojot šo piegādātāja prefiksu atlasītāju:

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

Svarīgs brīdinājums: šī sintakse ir nestandarta, līdz ar to visa nosaukuma trakums. Specifikācijā tas vispār neparādās. :placeholder-shownir standarta, un šķiet, ka pat spec autori domā, ka tā ::placeholderbūs standartizētā versija.

Tāpat kā jebkuru psuedo, pēc vajadzības varat to attiecināt uz konkrētiem elementiem, piemēram:

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

Demonstrācija

Atšķirība starp :placeholder-shownun::placeholder

:placeholder-shownir paredzēts pašas ievades atlasei, kad tiek parādīts tās viettura teksts. Atšķirībā no tā, ::placeholderkādos stilos viettura teksts.

Lūk, diagramma:

Es to uzskatīju par ļoti mulsinošu kā:

  1. speci ir tikai :placeholder-shownun nav::placeholder
  2. :placeholder-shown joprojām var ietekmēt viettura teksta stilu, jo tas ir pamatelements (piemēram, fonta lielums).

Ņemiet vērā, ka :placeholder-showntā ir pseido klase (tas ir elements noteiktā stāvoklī) un ::placeholderir pseido elements (redzama lieta, kuras patiesībā nav DOM). Atšķiras ar resnās vai divkāršās resnās zarnas.

Tab Atkins man to noskaidroja pa e-pastu:

: placeholder-shown, kas ir pseidoklase, ir jāizvēlas esošs elements - tas atlasa ievadi ikreiz, kad atrodaties viettura parādīšanas stāvoklī. Pseidoelements :: vietturis apņem faktisko viettura tekstu.

Elements vai klase?

Šī funkcionalitāte nav standartizēta. Tas nozīmē, ka katram pārlūkam ir atšķirīga ideja par tā darbību.

Sākotnēji Firefox to ieviesa kā pseido klasi, taču mainīja to vairāku iemeslu dēļ. Lai padarītu garu stāstu īsu, jūs nevarat darīt tik daudz ar pseido klasi.

Piemēram, ja vēlaties mainīt teksta krāsu, kad ievade ir fokusēta. Jūs izmantotu tādu atlasītāju kā input:focus::placeholder, ko jūs nevarētu izdarīt ar pseido klasi (tie nav sakrauti vienādi).

IE10 to atbalsta kā pseidoklasi, nevis kā elementu. Visi pārējie ir ieviesuši pseido elementu.

Firefox viettura krāsa

Jūs varētu pamanīt, kā pārlūkprogrammā Firefox viettura krāsa izskatās izbalējusi, salīdzinot ar citām pārlūkprogrammām. Zemāk redzamajā attēlā Firefox 43 ir parādīts kreisajā pusē, bet Chrome 47 - labajā pusē:

Chrome versija ideālā gadījumā ir tāds stils, kādu mēs vēlētos redzēt visur.

Tas ir tāpēc, ka pēc noklusējuma visiem Firefox vietturiem tiem tiek piemērota necaurredzamības vērtība, tāpēc, lai to novērstu, mums šī vērtība ir jāatiestata:

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

Pārbaudot šo demonstrāciju Firefox, varat uzzināt vairāk.

Atbalstītie stili

Pseido elements atbalsta šo īpašību veidošanu:

  • font īpašības
  • color
  • background īpašības
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • text-indent
  • opacity

Pseido klase atbalsta arī lielāko daļu (ja ne visas) šīs īpašības, taču iepriekš minēto iemeslu dēļ tā nav tik elastīga.

Pārlūkprogrammas atbalsts

Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.

Darbvirsma

Chrome Firefox IE Mala Safari
57 19 * Nē 79 10.1

Mobilais / planšetdators

Android Chrome Android Firefox Android iOS Safari
88 85 81. 10.3

Saistītās īpašības

Almanahs 2020. gada 22. maijā

: parādīts vietturis

input:placeholder-shown ( border: 5px solid red; ) Džefs Greiems