Просунута стилізація форм на чистому CSS

2

Від автора: всі знають, як працює стилізація форми CSS. Однак існують рідко використовувані селектори, з допомогою яких можна стилізувати поля введення і навколишні елементи. Деякі з них досить нові, інші ж доступні вже деякий час.

Живе демо.

placeholder-shown

Просунута стилізація форм на чистому CSS

Перший селектор новий і поки що не володіє повною підтримкою в браузерах. Але його легко можна використовувати з технікою прогресивного поліпшення. Селектор дозволяє визначати видимість плейсхолдера для користувача в даний момент часу. Може бути корисно для динамічного приховування та відображення лейблу поля вводу.

У демо вище я ховаю лейбл, поки користувач не почне вводити текст, після чого ховається плейсхолдер. Лейбл показується за допомогою прикольного плавного переходу. Щоб демо вище працювало, лейбл повинен йти ПІСЛЯ поля вводу.

Enter some text

.form-group {
position: relative;
padding-top: 1.5 rem;
}
label {
position: absolute;
top: 0;
font-size: var(—font-size-small);
opacity: 1;
transform: translateY(0);
transition: all 0.2 s ease-out;
}
input:placeholder-shown + label {
opacity: 0;
transform: translateY(1rem);
}

required

Просунута стилізація форм на чистому CSS

Використовуйте цей селектор для індикації обов’язкового поля (атрибут required). Я використовую порожній span .help-text і динамічно розміщую контент за допомогою псевдоэлемента ::before. Це можна було зробити на JS, однак я показую підхід на чистому CSS.

Required input

input:required + .help text::before {
content: ‘*Required’;
}

optional

Просунута стилізація форм на чистому CSS

Протилежність :required. Я знову використовую порожній span .help-text для показу необов’язкового тексту, якщо атрибута required НЕМАЄ.

input:optional + .help text::before {
content: ‘*Optional’;
}

disabled

Просунута стилізація форм на чистому CSS

Селектор повинен бути знайомий більшості. Однак про нього не можна забувати. Дуже важливо показувати користувачу, активно поле чи ні.

&:disabled {
border-color: var(—gray-lighter);
background-color: var(—gray-lightest);
color: var(—gray-light);
}

read-only

Просунута стилізація форм на чистому CSS

Поле з атрибутом readonly має трохи інший сенс, на відміну від disabled. На щастя, у нас є цей селектор.

input:read-only {
border-color: var(—gray-lighter);
color: var(—gray);
cursor: not-allowed;
}

valid

Просунута стилізація форм на чистому CSS

Велика частина валідаторів форм написана на PHP, проте ми можемо скористатися валідацією форм HTML5 і стилізувати відповідно поля. Селектор дозволяє стилізувати будь-яке поле, що проходить правила валідації браузера.

Нижче я кодуй svg для відображення чекбокса в поле вводу з допомогою властивості background-image.

input:valid {
border-color: var(—color-primary);
background-image: url(«data:image/svg+xml,%3Csvg width=’45px’ height=’34px’ viewBox=’0 0 45 34′ version=’1.1′ xmlns=’http://www.w3.org/2000/svg’ xmlns:xlink=’http://www.w3.org/1999/xlink’%3E%3Cg stroke=’none’ stroke-width=’1′ fill=’none’ fill-rule=’evenodd’%3E%3Cg transform=’translate%28-56.000000, -59.000000%29′ fill=’%232EEC96’%3E%3Cpolygon points=’70.1468531 85.8671329 97.013986 59 100.58042 62.5664336 70.1468531 93 56 78.8531469 59.5664336 75.2867133’%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A»);
}

invalid

Просунута стилізація форм на чистому CSS

Селектор перевіряє поле на НЕПРОХОДЖЕННЯ правил валідації браузера (наприклад, якщо поле email не містить електронну пошту).

Тут я кодуй svg для відображення «х» в полі вводу.

input:invalid {
border-color: var(—color-error);
background-image: url(«data:image/svg+xml,%3Csvg width=’30px’ height=’30px’ viewBox=’0 0 30 30′ version=’1.1′ xmlns=’http://www.w3.org/2000/svg’ xmlns:xlink=’http://www.w3.org/1999/xlink’%3E%3Cg stroke=’none’ stroke-width=’1′ fill=’none’ fill-rule=’evenodd’%3E%3Cg transform=’translate%28-128.000000, -59.000000%29′ fill=’%23F44336’%3E%3Cpolygon points=’157.848404 61.9920213 145.980053 73.8603723 157.848404 85.7287234 154.856383 88.7207447 142.988032 76.8523936 131.119681 88.7207447 128.12766 85.7287234 139.996011 73.8603723 128.12766 61.9920213 131.119681 59 142.988032 70.8683511 154.856383 59’%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A»);
}

Я також можу налаштувати повідомлення валідації для кожного типу поля з допомогою span .help-text і псевдоэлемента ::before.

Invalid input

input[type=’email’]:invalid + .help text::before {
content: ‘You must enter a valid email.’
}

in-range/:out-of-range

Просунута стилізація форм на чистому CSS

Селектори визначають, чи є введене число в діапазон min/max чи ні.

Out-of-range input
(value must be between 1 and 10)
input:out-of-range + .help text::before {
content: ‘Out of range’;
}

checked

Просунута стилізація форм на чистому CSS

Більшість повинні знати цей селектор. З його допомогою можна застосувати кастомний стилізацію до чекбоксам і радіо кнопок, коли вони активні. Моя техніка стилізації чекбоксов включає створення елемента-обгортки і розміщення label після input.

Option

Я візуально ховаю input, щоб він зник, але залишався кликабельним. Далі я стилизую label::before під чекбокс і label::after під галку. З допомогою :checked я стилизую обидва псевдоэлемента:

&:checked + label::before {
background-color: var(—color-primary);
}
&:checked + label::after {
display: block;
position: absolute;
top: 0.2 rem;
left: 0.375 rem;
width: 0.25 rem;
height: 0.5 rem;
border: solid white;
border-width: 2px 0 2px 0;
transform: rotate(45deg);
content: «;
}

Знайомство з фреймворком Hi-Q

В моєму CSS фреймворку Hi-Q є парочка корисних стилів для полів, у тому числі і чекбоксов, радіо кнопок і відключених полів. З допомогою theme builder ви можете візуально стежити за змінами. theme builder – легкий фреймворк, побудований на CSS змінних, які можна динамічно змінювати. Зручно для перемикання тим.