🎨 CSS :out-of-range: як стилізувати невалідні значення в input[type=number]

Одна з речей, яку я завжди недолюблював у веброзробці — це робота з формами. Формові елементи складно стилізувати через відмінності між браузерами та ОС, а валідація часто перетворюється на справжній головний біль. На щастя, сучасні HTML API значно покращили ситуацію з валідацією.

Проблема: min та max не показують помилку

Якщо у тебе є <input type="number">, ти можеш обмежити його значення атрибутами min та max:

<input type="number" min="1" max="10">

Проте якщо користувач введе невірне число, браузер не покаже помилку. Саме тут нам на допомогу приходить :out-of-range! 🚀

Як працює :out-of-range

Цей псевдоклас активується, якщо значення input[type=number] виходить за межі min і max:

/* Змінює стиль, якщо число поза допустимим діапазоном */
input[type="number"]:out-of-range {
  border-color: red;
}

Як це працює?

• Якщо користувач введе число менше за min або більше за max, браузер автоматично застосує цей стиль.
• Це працює без JavaScript! 🎉

⚠️ Але пам’ятай про серверну перевірку

CSS та HTML-валидація чудові, але вони не є захистом від некоректних даних. Навіть якщо у тебе є :out-of-range, користувач може:

• Відключити CSS у браузері.
• Надіслати запит напряму через DevTools або Postman.

🔐 Тому завжди перевіряй введені дані на сервері!

🏁 Висновок

• :out-of-range дозволяє легко стилізувати невалідні input[type=number].
• Це працює без JS та покращує UX.
• Але не замінює серверну перевірку.

Тож додавай :out-of-range у свої стилі та покращуй взаємодію з формами! 🚀