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

Anonim

:placeholder-shownPseudo-klasės parenka pati įvesties elementą , kai Vietaženklio tekstas egzistuoja į formos įvedimo. Pagalvokite apie tai kaip apie gerą būdą atskirti įvestis, kuriose šiuo metu rodomas vietos rezervavimo ženklo tekstas, nuo tų, kurie nėra.

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

Vietos ženklų idėja

Teksto pagrindu ir įvestyje gali būti vietos rezervavimo ženklo tekstas. Tai tekstas, kuris rodomas, kai įvestis yra tuščia, kad būtų galima pasiūlyti galimą vertę. Pvz., Formoje, kurioje prašoma mokyklos, gali būti etiketė, ko ji prašo, bet tada vietovelyje kaip pavyzdinę vertę pasiūlykite „Forest Hills Example High School“:

School Name:

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 ::placeholderpseudo 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:

:placeholder-shown, būdamas pseudo klase, turi pasirinkti esamą elementą. Jis pasirenka įvestį, kai būsite rodomas vietos rezervavimo būsenoje. ::placeholderPseudo elementas apsiaustas faktinį Vietaženklio tekstas.

Jei reikia suformuoti vietos rezervavimo ženklo tekstą

Naudokite ::placeholder (iš tikrųjų naudokite visus beprotiškus pardavėjo priešdėlius), kuriuos mes čia išsiaiškinome „Almanache“.

Daugiau informacijos

  • 4 lygio selektoriai Spec

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“
47 51 11 * 79 9

Mobilusis / planšetinis kompiuteris

„Android Chrome“ „Android Firefox“ „Android“ „iOS Safari“
88 85 81 9.0–9.2