Вкусного кофе, друзья!
Сегодня мы разберём вариант кастомного placeholder. Часто бывает что в дизайн макетах обязательные поля имеют звёздочку с цветом отличным от цвета текста самой подсказки.
Что в итоге мы хотим получить:
Штатными средствами браузера покрасить такие звёздочки не является возможным. Но мы можем немного схитрить и подменить placeholder на свой блок, полностью заменяя его.
Прежде чем начнём разбираться что тут и как происходит, посмотрим на пример:
https://codepen.io/JustRideK/pen/pGQYzw
Для начала разберём html разметку
1. Слой-обёртка для позиционирования
Первое, что нам надо сделать, это обернуть input в блок, чтобы иметь возможность легче позиционировать элементы.
Для блока-обертки добавим класс ".custom-placeholder"
2. Элемент для текста placholder
В примере элемент строчного тега "span". А чтобы иметь возможность покрасить звёздочку отдельно от текста, эту звёздочку нужно отделить от основного текста. Я использовал аттрибут "data-mark"
3. Текстовое поле input с обязательным указанием аттрибута "required".
Этот аттрибут указывает, что данное поле является обязательным к заполнению. В дальнейшем мы можем с помощью специальных селекторов, определить есть ли символы в поле. При разборке стилей расскажу зачем это нужно.
Разберём css стили
Первые строки задают внешний вид, отступы и размеры для блока-обёртки ".custom-placeholder"
На 10 строке мы задали внешний вид для текстового поля
18 строка задаёт позицию и внешний вид нашего span-placehoder.
На 27 строке ("&:after") мы создаём псевдоэлемент в который поместим наш символ звёздочки.
В стилевой файл помещать контент страницы дело не благородное. Вспомните, мы добавили нашему placeholder элементу уттрибут "data-mark" со значением символа - "Звёздочка"
Теперь мы можем стилями забрать значение аттрибута и поместить этот символ в псевдоэлемент. Делается это на 28 строке стилем:
content: attr(data-mark);
Таким не хитрым трюком мы отделили основной текст от звёздочки. Останется дело за малым, покрасить звёздочку в нужный цвет, а заодно можно сделать анимацию для всего текста.
Но так как наш новый placeholder напрямую не относится к текстовому полю, то и при вводе символов мы будем постоянно видеть нашу звёздочку. На помощь нам идут сразу несколько селекторов ":focus" и ":valid" (строка 34)
Если фокус ввода находится на поле или поле заполнено символами, то нам надо прятать наш placeholder.
Проверить фокус ввода на поле нам поможет селектор ":focus".
Проверить символы в поле нам поможет селектор ":valid".
Обязательное к заполнению поле, будет всегда валидным если в нём есть хоть один символ, иначе поле считается неправильно заполненным (невалидным), нам это как раз подходит.
В примере у валидного поля я использовал анимацию перехода, placeholder "улетает" на 100% своего размера за правую сторону блока-обёртки ".custom-placeholder"
Сегодня на этом всё, практикуйтесь, изучайте новые техники, даже если они и кажутся не практичными, всегда лучше иметь в заначке пару тройку обходных путей.
Статья получилась довольно большая ради одного примера, в следующий раз буду стараться делать контент меньше. Если у вас есть макеты с элементами, которые вызывают трудности при реализации, выкладывайте в комментариях, будет интересно разобрать. Поддержать канал для выхода новых статей вы как всегда можете вопросами в комментариях и лайками