CSS Анимируем плейсхолдер — placeholder-shown
Как задать CSS стиль
Существует четыре способа задания CSS стиля для тегов HTML. 1) Inline-стиль. 2) Внедрённый стиль 3) Импортированный стиль. 4) Стиль из файла. И в этой статье мы разберём все четыре способа. Для начала первый способ - это inline-стиль. Данный стиль указывается непосредственно в самом теге. Например: <p style = "font-size: 150%; text-align: center;">текст</p> В данном случае мы задали, чтобы элемент "текст" будет размером в 150% и выравнен по центру. Это пример inline-стиля. Второй способ - это внедрённый CSS стиль, то есть стиль, который задаётся в голове документа, в теге <head>. Например, так:...
Field - Кастомный placeholder
Сегодня мы разберём вариант кастомного placeholder. Часто бывает что в дизайн макетах обязательные поля имеют звёздочку с цветом отличным от цвета текста самой подсказки.
Что в итоге мы хотим получить: Штатными средствами браузера покрасить такие звёздочки не является возможным. Но мы можем немного схитрить и подменить placeholder на свой блок, полностью заменяя его.
Прежде чем начнём разбираться что тут и как происходит, посмотрим на пример:
https://codepen.io/JustRideK/pen/pGQYzw
Для начала разберём html разметку
1...