:placeholder-shownПсевдо-клас вибирає сам вхідний елемент , коли замісник текст існує у формі введення. Подумайте про це як про приємний спосіб розрізнити вхідні дані, які в даний час відображають текст заповнювача, від тих, які ні.
input:placeholder-shown ( border: 5px solid red; )Ідея заповнювачів
Текстові s і вхідні дані можуть мати текст-заповнювач. Це текст, який відображається, коли введення порожнє, щоб запропонувати можливе значення. Наприклад, форма, в якій запитується школа, може мітити ярлик того, про що вона просить, але тоді в якості прикладу значення в якості заповнювача пропонується “Forest Hills Example High School”:
School Name: Різниця між :placeholder-shownі::placeholder
:placeholder-shownпризначений для вибору самого введення, коли відображається текст його заповнювача. На відміну від ::placeholderяких стилів текст-заповнювач.
Ось схема:
Я знайшов це дуже заплутаним, оскільки:
- специфікації лише мають,
:placeholder-shownа ні::placeholder :placeholder-shownвсе ще може вплинути на стиль тексту заповнювача, оскільки це батьківський елемент (наприклад, розмір шрифту).
Зверніть увагу, що :placeholder-shownце псевдо- клас (це елемент у певному стані) і ::placeholderє псевдо- елементом (видима річ, якої насправді немає в DOM). Відрізняється одинарною і подвійною двокрапками.
Таб Аткінс розчистив це для мене електронною поштою:
: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 |