: показан заместител - CSS-трикове

Anonim

В :placeholder-shownпсевдо-класа избира входния самия елемент , когато съществува заместител на текст в въвеждане форма. Помислете за това като за добър начин да разграничите входовете, които в момента показват текст на заместител, от тези, които не са.

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

Идеята зад заместителите

Текстово базирани s и входните данни могат да съдържат заместващ текст. Това е текст, който се показва, когато входът е празен, за да предложи възможна стойност. Например, формуляр, който иска училище, може да има етикет за това, което иска, но след това да предложи „Примерна гимназия Forest Hills“ в заместителя като примерна стойност:

School Name:

Разликата между :placeholder-shownи::placeholder

:placeholder-shownе за избиране на самия вход, когато се показва текстът му на заместител. За разлика от ::placeholderкои стилове текстът на заместител.

Ето диаграма:

Намерих това за много объркващо като:

  1. спецификациите имат само :placeholder-shownи не::placeholder
  2. :placeholder-shown все още може да повлияе на стила на заместващия текст, тъй като е родителски елемент (напр. размер на шрифта).

Имайте предвид, че :placeholder-shownе псевдо- клас (това е елемент в дадена държава) и ::placeholderе псевдо елемент (видим нещо, което всъщност не е в DOM). Разграничава се от единични срещу двойни двоеточия.

Tab Atkins ми го изчисти по имейл:

:placeholder-shown, като псевдоклас, трябва да избере съществуващ елемент. Той избира входа всеки път, когато сте в състояние, показващо заместител. В ::placeholderпсевдо-елемента увива действителният текст контейнер.

Ако трябва да оформите текста на заместителя

Използвайте ::placeholder (всъщност използвайте всички луди префикси на доставчици за него), които подробно описахме в „Алманах“ тук.

Повече информация

  • Селектори Ниво 4 Спец

Поддръжка на браузър

Тези данни за поддръжка на браузъра са от Caniuse, който има повече подробности. Число показва, че браузърът поддържа функцията на тази версия и по-нова.

работен плот

Chrome Firefox IE Ръб, край Сафари
47 51 11 * 79 9

Мобилен / таблет

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