CSS псевдокласи: стилізація полів форм за введеними даними

30

Від автора: давайте розберемо кілька псевдокласів, спеціально заточених під поля форми і введені дані. З допомогою цих псевдокласів можна стилізувати поля по валідності введених даних (є у поля атрибут required або enabled).

Всі представлені в статті псевдокласи розроблені для форм, що дозволяє не писати довгі селектори. Якщо просто використовувати :enabled, це не зробить ніякого впливу на елементи span. Звуження області пошуку по селекторам буває корисно, коли необхідно стилізувати різні типи полів форми.

enabled і disabled

За назвою можна зрозуміти, що ці псевдокласи знаходять елементи HTML5 атрибуту disabled (або за його відсутності). Дані псевдокласи можна використовувати на полях типу input select, button і fieldset:

Save draft

Елементи форми активні за замовчуванням. Тобто вони відключаються тільки, якщо встановлений атрибут disabled. Запис форми input:enabled знайде всі теги input без атрибуту disabled. І навпаки, запис button:disabled знайде всі кнопки з атрибутом disabled:

button:disabled {
opacity: .5;
}

На малюнку нижче показано стану :enabled :disabled для тега button.

CSS псевдоклассы: стилизация полей форм по введенным данным

required і optional

Стану required і optional обумовлені наявністю або відсутністю атрибута required у поля. Наприклад:

E-mail:

Більшість браузерів показують, що поле обов’язково тільки після відправки форми. Псевдоклас :required дозволяє показувати користувачу, що поле обов’язково ще до відправки даних. Наприклад, CSS код нижче додає жовту рамку до поля email з коду зверху. Скріншот показаний нижче:

input:required {
border: 1px solid #ffc107;
}

CSS псевдоклассы: стилизация полей форм по введенным данным

Клас optional працює схожим чином і знаходить елементи, у яких немає атрибута required. Наприклад, CSS код нижче дає нам наступний результат.

select:optional {
border: 1px solid #ccc;
}

CSS псевдоклассы: стилизация полей форм по введенным данным

checked

На відміну від розглянутих псевдокласів :checked застосовується тільки до радиокнопкам і чекбоксам. По імені можна зміркувати, що даний псевдоклас дозволяє стилізувати вибрані поля.

На превеликий жаль, стилізація радіокнопок і чекбоксов в більшості браузерів схожа на приємну поїздку до стоматолога. Специфікація CSS Basic User Interface Module Level 4 намагається вирішити цю проблему за допомогою властивості appearance, однак це властивість поки що ніде не підтримується. WebKit/Blink браузерах і Firefox підтримується нестандартна версія властивості з вендорными префіксами.

Для створення кастомних радіокнопок і чекбоксов, які будуть добре працювати у всіх браузерах потрібно розумно підійти до селекторам. Для створення кастомних радіокнопок і чекбоксов ми візьмемо суміжний комбінатор, псевдоэлемент і :ckecked. Наприклад, щоб змінити стилі лейблу, коли прив’язана до нього кнопка знаходиться в активному стані, можна взяти наступний CSS:

[type=radio]:checked + label {
font-weight: bold;
font-size: 1.1 rem;
}

Лейбл стає жирним, і збільшується розмір шрифту, коли радіокнопка активна. Елемент можна поліпшити з допомогою псевдоэлемента ::before, заданого тегами label. За допомогою цього псевдоэлемента можна вставляти кастомні поля:

[type=radio] { opacity: 0; }
[type=radio] + label::before {
background: #fff;
content: «;
display: inline-block;
border: 1px solid #444;
height: 1.2 rem;
margin-right: 1em;
vertical-align: middle;
width: 1.2 rem;
}
[type=radio]:checked + label::before {
background: #4caf50;
}

Так ми отримуємо користувальницькі поля форми, які можна побачити нижче.

CSS псевдоклассы: стилизация полей форм по введенным данным

Ця техніка буде працювати тільки при правильному структуруванні HTML:

тег label повинен бути суміжним зі своїм полем форми;

у поля форми повинен бути атрибут id крім name (наприклад, );

у тега label повинен бути атрибут for, і його значення повинно збігатися з id поля форми (наприклад, Chocolate).

Прив’язка лейблів через for до полям форми забезпечує активацію поля форми по кліку на сам лейбл або його дочірній псевдоэлемент (::before).

in-range out-of-range

Псевдокласи in-range out-of-range можна використовувати на полях range, number та date. З класами in-range out-of-range необхідно використовувати атрибути min та/або max. Приклад з полем типу number:

Enter a number from 1-100

Додамо трохи CSS. Будемо міняти стилі, якщо значення входять або виходять за межі діапазону від 1 до 100:

: out-of-range {
background: #ffeb3b;
}
:in-range {
background: #fff;
}

Якщо ввести -3 або 101, фоновий колір #picknum зміниться на жовтий, як прописано в нашому правилі out-of-range (див. малюнок нижче). Якщо значення залишається в рамках діапазону, фон залишиться білим, як вказано в правилі :in-range.

CSS псевдоклассы: стилизация полей форм по введенным данным

:valid і :invalid

З допомогою псевдокласів :valid і :invalid можна стилізувати поля форми з певним умовам. Перевірочні обмеження накладаються за допомогою атрибутів type і pattern. Наприклад, поле type=»email» не пройде валідацію, якщо користувач введе «foo 123». Приклад показаний нижче.

CSS псевдоклассы: стилизация полей форм по введенным данным

Поле форми не пройде валідацію при наступних умовах:

пусте обов’язкове поле;

введені дані не відповідають вимогам щодо type і pattern;

введені дані випадають за рамки атрибутів min і max.

Порожні необов’язкові поля валідні за замовчуванням. Якщо введені дані задовольняють умовам поля, поле валидно.

Поля форми можуть приймати кілька станів. Так що, можливо, доведеться розмежовувати специфічність (в наступному розділі) і вирішувати конфлікти з каскадированием. Один із способів – обмеження використовуються в проектах псевдокласів. Наприклад, не прописуйте optional, якщо використовуєте valid.

Псевдокласи також можна зчіплювати. Наприклад, псевдокласи :focus :invalid можна поєднати, щоб стилізувати елемент тільки, коли він має фокус: input:focus:invalid. Зчіпка псевдокласів дозволяє стилізувати елементи з кількома станами.