::placeholderПсевдо елемент (або псевдо - клас, в деяких випадках, в залежності від реалізації браузера) дозволяє стилізувати текст - заповнювач елемента форми. Як і в текстовому наборі з placeholderатрибутом:
Ви можете стилізувати цей текст у більшості браузерів за допомогою цього безлічі префіксів селекторів постачальників:
::-webkit-input-placeholder ( /* Chrome/Opera/Safari */ color: pink; ) ::-moz-placeholder ( /* Firefox 19+ */ color: pink; ) :-ms-input-placeholder ( /* IE 10+ */ color: pink; ) :-moz-placeholder ( /* Firefox 18- */ color: pink; )Важливе застереження: цей синтаксис є нестандартним, отже, всі божевільні імена. Це взагалі не відображається в специфікації. :placeholder-shownє стандартним, і, схоже, навіть автори специфікацій вважають, що ::placeholderце буде стандартизована версія.
Як і будь-який psuedo, ви можете застосувати його до певних елементів за потреби, наприклад:
input(type="email").big-dog::-webkit-input-placeholder ( color: orange; )Демо
Різниця між :placeholder-shownі::placeholder
:placeholder-shownпризначений для вибору самого введення, коли відображається текст його заповнювача. На відміну від ::placeholderяких стилів текст-заповнювач.
Ось схема:
Я знайшов це дуже заплутаним, оскільки:
- специфікації лише мають,
:placeholder-shownа ні::placeholder :placeholder-shownвсе ще може вплинути на стиль тексту заповнювача, оскільки це батьківський елемент (наприклад, розмір шрифту).
Зверніть увагу, що :placeholder-shownце псевдо- клас (це елемент у певному стані) і ::placeholderє псевдо- елементом (видима річ, якої насправді немає в DOM). Відрізняється одинарною і подвійною двокрапками.
Таб Аткінс розчистив це для мене електронною поштою:
: placeholder-Показаний, будучи псевдокласом, повинен вибрати існуючий елемент - він вибирає вхідні дані щоразу, коли ви перебуваєте в показнику placeholder-display. Псевдоелемент :: placeholder обгортає фактичний текст заповнювача.
Елемент чи клас?
Ця функціональність не стандартизована. Це означає, що кожен браузер має різне уявлення про те, як він повинен працювати.
Спочатку Firefox реалізував це як псевдо-клас, але змінив його з багатьох причин. Якщо коротко, ви не можете зробити стільки з псевдокласом.
Наприклад, якщо ви хочете змінити колір тексту, коли вводиться фокус. Ви скористаєтесь селектором like input:focus::placeholder, чого ви не змогли б зробити з псевдокласом (вони не складаються однаково).
IE10 підтримує це як псевдо-клас, а не як елемент. Усі інші впровадили псевдоелемент.
Колір заповнювача Firefox
Ви можете помітити, як у Firefox колір заповнювача виглядає тьмяним у порівнянні з іншими браузерами. На зображенні нижче Firefox 43 зображений зліва, а Chrome 47 - праворуч:
Це пояснюється тим, що за замовчуванням до всіх заповнювачів у Firefox застосовується значення непрозорості, тому для того, щоб це виправити, нам потрібно скинути це значення:
::-moz-placeholder ( opacity: 1; )Ви можете побачити більше, протестувавши цю демонстраційну версію у Firefox.
Підтримувані стилі
Псевдоелемент підтримує стиль цих властивостей:
fontвластивостіcolorbackgroundвластивостіword-spacingletter-spacingtext-decorationvertical-aligntext-transformline-heighttext-indentopacity
Псевдо-клас також підтримує більшість (якщо не всі) цих властивостей, але не є настільки гнучким з вищезазначених причин.
Підтримка браузера
Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.
Робочий стіл
| Chrome | Firefox | IE | Край | Сафарі |
|---|---|---|---|---|
| 57 | 19 * | Ні | 79 | 10.1 |
Мобільний / планшетний
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.3 |
Пов’язані властивості
Альманах 22 травня 2020 року: показаний заповнювач
input:placeholder-shown ( border: 5px solid red; ) 
Джефф Грем