Атрибут ::placeholder

Псевдоелемент ::placeholder color (у деяких випадках псевдоклас) дозволяє задати текстове наповнення елемента форми. Він встановлюється за допомогою атрибута placeholder: .

Цей текст можна стилізувати для більшості сучасних браузерів за допомогою спеціальних префіксів:

Як і у випадку з будь-яким псевдоелементом, його можна застосовувати до певних елементів наступним чином:

Різниця між :placeholder-shown та ::placeholder

:placeholder-shown призначений для виділення форми введення, а CSS placeholder color відповідає за стилізацію тексту.

Погляньте на діаграму:

Слід зазначити, що :placeholder-shown може проводити стилізацію тексту, оскільки є йому батьківським елементом ( наприклад, можна змінювати font-size ).

Зверніть увагу: :placeholder-shown - псевдоклас ( елемент у конкретному стані ), а ::placeholder - це псевдоелемент ( видима частина, яка знаходиться не в DOM ). Відрізняються вони одинарними та дійними лапками.

Оскільки :placeholder-shown є псевдокласом, він повинен виділяти існуючий елемент. Тому виділяє форму введення, коли текст в елементі форми відображається. Псевдоелемент ::placeholder обертає сам текст заглушки.

Елемент чи клас?

У цьому плані input placeholder color не стандартизовано. Це означає, що кожен браузер має своє розуміння того, як це має працювати.

Спочатку цей псевдоклас був впроваджений у браузер Firefox. Цей псевдоклас дає не так багато простору для маневру. Наприклад, якщо потрібно змінити колір тексту при виділенні форми введення, потрібно використовувати селектор типу input:focus::placeholder . А псевдоклас не дозволяє це зробити.

IE10 підтримує цей функціонал уяк псевдоклас, а не елемент. У решті браузерів він розцінюється як псевдоелемент.

Колір заглушки у Firefox

Ви помітили, що колір заглушок виглядає тьмянішим порівняно з іншими браузерами. На малюнку, наведеному нижче, зліва показаний Firefox 43 , а праворуч - Chrome 47 :

Спробуйте відкрити це демо у браузері Firefox.

Підтримка стилів

Псевдоелемент підтримує такі властивості:

• font properties;
• color;
• background properties;
• word-spacing;
• letter-spacing;
• text-decoration;
• vertical-align;
• text-transform;
• line-height;
• text-indent;
• opacity;

Додаткові ресурси

Браузерна підтримка

Тут мають на увазі як нативна підтримка CSS input placeholder color , і підтримка, реалізована з допомогою префіксів.

Chrome	Safari	Firefox	Opera	IE	Android	iOS
4+	5+	4+	15+	10+	Будь-який	Будь-який

Firefox підтримує псевдокласи до 18-ї версії. Версії 19+ підтримують псевдоелемент, але з клас.

Дана публікація є перекладом статті :: ::placeholder , підготовленої дружньою командою проекту Інтернет-технології.

---