Атрибут CSS :placeholder-shown

Одним из первых плагинов, который появился в новом фреймворке на ранних этапах разработки на JavaScript, был placeholder плагин, поэтому мы так обрадовались приходу, атрибута placeholder в HTML5. Тогда любители CSS, вроде меня, были в восторге от того, что спецификация CSS позволила нам стилизовать плэйсхолдеры.

Не так давно я столкнулся с проблемой, когда хотел применить специфичный шрифт font-family  к элементу , только лишь тогда, когда он был заполнен (содержал) текст. Изначально я планировал установить шрифт font-family на , а затем повторно применить шрифт body's блока для  ::placeholder, но, идеально не вышло - выглядело как будто страницу должны закрыть на техническую доработку. 

Я запостил проблему в Твиттере, надеясь найти лучшее решение, и, к счастью, Факундо Коррадини предложил :placeholder-shown. Атрибут :placeholder-shown предоставлен элементу псевдокласса только тогда, когда он сам появляется, поэтому можно выбрать только placeholder , но не текст ввода:

input { color: red; }
input::placeholder { color: blue; }/* Применяем стили если показан placeholder */
input:placeholder-shown { color: yellow; }/* Применяем стили если нет placeholder */
input:not(:placeholder-shown) { color: green; }

:placeholder-shown - это потрясающий псевдо-селектор, который позволяет использовать стили плейсхолдеров и их элементов с большой эффективностью и, кроме того, учитывать их состояние. Креативность - это не просто дизайнерский термин, это способ мышления разработчиков, благодаря которому мы решаем интересные задачи!