: prikazan nadomestni znak - CSS-triki

Anonim

:placeholder-shownPseudo-class izbere sam vhodni element , ko na vhodu obliki obstaja ogrado besedila. Pomislite na to kot na lep način za razlikovanje med vložki, ki trenutno prikazujejo besedilo nadomestnih znakov, in tistimi, ki niso.

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

Zamisel za ograde

Besedilni s in vnos lahko vsebujejo nadomestno besedilo. Besedilo je prikazano, ko je vnos prazen, da predlaga možno vrednost. Na primer, obrazec, ki prosi za šolo, ima lahko oznako za to, kar prosi, nato pa v ogradni vrednosti kot primer vrednosti predlagajte »Forest Hills Example High School«:

School Name:

Razlika med :placeholder-shownin::placeholder

:placeholder-shownje za izbiro samega vnosa, ko je prikazano njegovo nadomestno besedilo. V nasprotju s ::placeholderkaterimi slogi je nadomestno besedilo.

Tu je diagram:

To se mi je zdelo zelo zmedeno kot:

  1. očala imajo samo :placeholder-shownin ne::placeholder
  2. :placeholder-shown lahko še vedno vpliva na oblikovanje besedila nadomestnega znaka, saj je nadrejeni element (npr. velikost pisave).

Upoštevajte, da :placeholder-shownje psevdo- razred (gre za element v določenem stanju) in ::placeholderje psevdo- element (vidna stvar, ki v resnici ni v DOM-u). Razlikuje se po enojnih in dvojnih dvopičjih.

Tab Atkins mi je to poravnal po e-pošti:

:placeholder-shown, ki je psevdorazred, mora izbrati obstoječi element. Izbere vnos, kadar koli ste v stanju prikaza mesta. ::placeholderPsevdoelement obloge dejansko nadomestno besedilo.

Če morate oblikovati besedilo nadomestnega znaka

Uporabite ::placeholder (dejansko uporabite zanj vse predpone prodajalcev), ki smo jih podrobno opisali v Almanahu tukaj.

Več informacij

  • Izbirniki Stopnja 4 Spec

Podpora za brskalnik

Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.

Namizje

Chrome Firefox IE Rob Safari
47 51 11 * 79 9.

Mobilni / tablični računalnik

Android Chrome Android Firefox Android iOS Safari
88 85 81 9,0-9,2