Ось приклад реалізації:
Звичайно на nest.com зміщення (зміна тексту і показ елемента label) реалізовано ефектніше. З використанням js ми могли б реалізувати більш плавні рухи, але наше завдання реалізувати все на чистому CSS.
Дана техніка заснована на наступному: елемент label є псевдо placeholder 'ом.
Примітка
Є принаймні дві причини для використання даної техніки:
- Можливість заощадити місце. Оскільки label і input об'єднані, ви економите простір. Коли поле в фокусі, label залишається видимим за рахунок правильного позиціонування.
- Поле робиться як одна велика кнопка. Як відомо, атрибути for у label і id у поля дозволяють зв'язати елементи, але ще більш актуалізувати зв'язок можна за допомогою великого прямокутника. Прямокутник так і просить заповнити поле і клікнути на кнопку.
Трюк 1 - label замінює placeholder
Є div. який містить label і input (який потрібно вам в будь-якому випадку, так як label і input повинні знаходитися в блокових елементах). Для div використовується відносне позиціонування. Завдяки відносного позиціонування ми можемо абсолютно позиціонувати label і текстове поле всередині div. Якщо ви розташуєте поле зверху з прозорим фоном, то ви як і раніше будете бачити label прямо під полем навіть при кліці по полю.
Трюк 2 - псевдоклас: focus і сестринський комбінатор
Порядок розташування label і input не має значення, оскільки семантично вони пов'язані через атрибут for. Але якщо ми розташуємо поле першим, то з'являється можливість використовувати псевдоклас: focus і сестринський комбінатор (+), таким чином, ми можемо призначити стилі елементу label при фокусі на поле.
З label ви вільні робити все що захочете. У моєму прикладі label (при фокусі на поле) розташовується в нижній частині блоку і щодо правого боку блоку.
Трюк 3 - псевдоклас: valid або валідація
Якщо поле заповнене і втратило фокус, то було б дивно в цьому випадку залишати в ньому текст label. На щастя в CSS є псевдоклас valid. який перевіряє поля форми на коректність (по типу). Наприклад, перевірити поле на обов'язковість і наявність в ньому тексту можна так:
Пам'ятайте, текст елемента label видно з-за того, що у input прозорий фон. Щоб сховати label. нам досить встановити фон у input:
Решта код зачіпає дизайн елементів.