: helyőrző-bemutatott - CSS-trükkök

Anonim

Az :placeholder-shownál-osztály maga választja ki a beviteli elemet, ha a helyőrző szöveg létezik egy űrlap bemenetben. Gondoljon arra, hogy szép módja annak, hogy megkülönböztesse azokat a bemeneteket, amelyek jelenleg helyőrző szöveget mutatnak, és azok között, amelyek nem.

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

Az ötlet a helyőrzők mögött

A szövegalapú s és a bevitel helyőrző szöveget tartalmazhat. Ez egy szöveg, amely akkor jelenik meg, amikor a bemenet üres, hogy egy lehetséges értéket javasoljon. Például egy iskolát kérő űrlapon fel lehet tüntetni, hogy mit kér, de ezután a helyőrzőben példaértékként javasolja a „Forest Hills Example High School” -t:

School Name:

A különbség a :placeholder-shownés között::placeholder

:placeholder-showna bemenet kiválasztására szolgál, amikor a helyőrző szövege megjelenik. A ::placeholderhelyőrző szöveggel szemben, mely stílusokkal ellentétben .

Itt egy ábra:

Ezt nagyon zavarónak találtam, mivel:

  1. a specifikációknak csak van :placeholder-shownés nincs::placeholder
  2. :placeholder-shown továbbra is befolyásolhatja a helyőrző szöveg stílusát, mivel ez egy szülő elem (pl. betűméret).

Ne feledje, hogy :placeholder-shownpszeudo- osztály (ez egy elem egy adott állapotban) és ::placeholderpszeudo- elem (egy látható dolog, ami valójában nincs a DOM-ban). Megkülönböztethető egy-kettő kettősponttal.

Tab Atkins számomra e-mailben tisztázta:

:placeholder-shown, ál-osztály lévén, ki kell választania egy létező elemet. Kiválasztja a bemenetet, amikor éppen helyőrző-megjelenítő állapotban van. Az ::placeholderál-elem beburkolja a tényleges helyőrző szöveget.

Ha meg kell stílusozni a helyőrző szöveget

Használja ::placeholder (valójában használja az összes őrült eladó előtagot hozzá), amelyet itt az Almanachban részletezünk.

Több információ

  • Kiválasztók 4. szint Spec

Böngésző támogatás

Ez a böngésző támogatási adat a Caniuse cégtől származik, amely részletesebben szerepel. Egy szám azt jelzi, hogy a böngésző támogatja az adott és újabb verziók szolgáltatásait.

Asztal

Króm Firefox AZAZ Él Szafari
47 51 11 * 79 9.

Mobil / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81. 9.0-9.2