Псевдокласи стану

Існує набір псевдокласів, створених спеціально для елементів форм, і жодним чином не впливають на інші елементи. За допомогою них можна оформляти поля форми за станом валідності введених даних або обов'язковості заповнення.

:enabled і :disabled

Дозволяють вибрати елемент в активному або відключеному стані, який визначається присутністю або відсутністю булевого атрибута disabled. Застосовуються до елементів <input>, <select> і <button>.

Корисно

Елементи з атрибутом disabled не отримують ефект ховеру і фокусу, а також ігнорують кліки миші. Це можна використовувати, наприклад для того, щоб заборонити надсилання форми, доки не заповнені всі поля, але для цього потрібен JavaScript.

:checked

Застосовується до радіокнопок і чекбоксів, та дозволяє вибрати тільки відзначені поля. Наприклад, нехай при виборі чекбоксу текст мітки стає синім. Використовуючи селектор +, можна вибрати мітку, коли чекбокс відзначений, але для цього необхідно, щоб тег <label> був у розмітці після чекбоксу.

<input type="checkbox" name="hobby" value="music" id="music" />
<label for="music">Музика</label>

:in-range і :out-of-range

Ці псевдокласи застосовуються до елементів <range>, <number> і <date>, якщо у них вказані атрибути min і max.

Створимо форму замовлення піци з полем для введення кількості штук. Якщо ввести число менше 1 або більше 10, колір рамки інпуту зміниться на червоний. Якщо значення залишається в рамках діапазону, колір буде зеленим.

У таких селекторів є обмеження. Колір рамки інпуту в прикладі відразу червоний, якщо задане початкове значення менше 1 або більше 10, і зелений, якщо початкове значення не задане або належить до діапазону від 1 до 10. Тобто селектори застосовуються ще до введення будь-якого значення в поле. Як вирішити цю проблему розберемося далі.

:required і :optional

Застосовуються до елементів, залежно від присутності або відсутності атрибута required. Браузери показують, що поле є обов'язковим лише при спробі відправити форму. Псевдоклас :required дозволяє оформити поле і показати користувачеві, що воно обов'язкове ще до відправлення. Псевдоклас :optional на практиці використовується вкрай рідко.

Увага

Проблеми такі самі, як і у попередньої групи псевдокласів - стилі застосовуються ще до введення будь-якого значення.

:valid і :invalid

Дозволяють вибрати елементи з валідним або невалідним введеним значенням. Перевірочні обмеження задаються атрибутами type, minlength, maxlength і pattern.

Увага

Проблеми такі самі, як і у попередньої групи - якщо поле містить атрибут required, то селектор :invalid застосовується ще до введення значення, оскільки обов'язкове поле не може бути порожнім.

:placeholder-shown

Застосовується, залежно від видимості плейсхолдера - значення атрибута placeholder. Вводьте текст в поля форми і колір рамки поля зміниться на синій, щойно зникне плейсхолдер.

Цікаво

Зверніть увагу на селектор .form-input::placeholder, він використовується для оформлення тексту плейсхолдера.

Композиція псевдокласів

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

.form-input:not(:placeholder-shown):required:valid {
  /* ... */
}

Селектор виходить громіздким, але не складним, і застосується до елемента з класом .form-input.

• Якщо елемент обов'язковий для заповнення - :required.
• Введене значення валідне - :valid.
• Текст плейсхолдера не видно - :not(:placeholder-shown).

Щойно щось ввели і плейсхолдер зникнув - відбувається валідація і селектор застосовується до елемента. Обов'язкова частина цієї техніки - наявність атрибута placeholder, значенням якого може бути текст або просто рядок з одним пробілом, головне не порожній.

Корисно

Для складнішої валідації і оформлення результатів потрібна додаткова розмітка і мова програмування JavaScript. Налаштовувати складну валідацію в HTML немає сенсу, таке рішення не масштабується і погано підтримується.

:focus-within

Застосовується до елемента, коли він сам або елементи всередині нього отримують фокус. На відміну від :focus, який вибирає сам елемент, що отримав фокус, :focus-within працює для предків. Це дозволяє застосувати стилі до мітки, форми або окремих її частин, коли користувач взаємодіє з полями.

Додамо ефект зміни кольору рамки форми і тексту пов'язаної мітки на синій під час отримання фокусу будь-яким полем.