Від автора: У другій статті з трьох, що оповідають про форми HTML5, ми розглянемо стилі або, якщо точніше — селектори псевдо-класів, якими можна скористатися для вибору полів введення в різних станах. Якщо ви ще не читали цю серію статей, будь ласка, почніть з першої і переконайтеся в тому, що розумієте основні концепції розмітки.
Видалення стилів за замовчуванням
Ви напевно вже помітили, що браузери застосовують форматування поумолчанию. Наприклад, велика частина браузерів застосовують до блоків search закруглені кути і додають тонкі фонові градієнти, які в «плоскому» дизайні можуть виглядати недоречно.
Для видалення стилів за замовчуванням можна скористатися властивістю appearance: none;,якому потрібні префікси. Однак застосовувати його з обережністю, так як воно здатне видалити важливі стилі — в chrome для е зникають чекбокси і радіокнопки! Щоб убезпечити себе, користуйтеся цим властивістю лише тоді, коли воно потрібне і тестуйте його у всіх можливих браузерах, наприклад:
input[type=»text»],
input[type=»email»],
input[type=»tel»],
input[type=»number»],
textarea {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
outline: 0;
box-shadow: none;
}
Зверніть увагу, що, крім того, я зробив скидання outline і box-shadow для видалення фокусування на потворною блакитний тіні блоку за замовчуванням і стилі помилок у всіх браузерах. Властивість appearance задокументовано в CSS-Tricks, але поки що перебуває в «сирому» стані.
:focus
:focus підтримується з часів CSS2.1 і визначає стилі використовуваного в даний момент поля, наприклад:
input:focus,
textarea:focus,
select:focus {
background-color: #eef;
}
[CSS]
:checked
Стилі :checked застосовуються до зазначених чекбоксам або радиокнопкам, наприклад:
[HTML]
check me
[/HTML]
[CSS]
input:checked ~ label {
font-weight: bold;
}
Відповідного селектора«:безконтрольно» не існує, але він вам і не потрібен: просто створіть стиль за замовчуванням, а потім застосуйте зміни при активованому :checked. В якості альтернативи можна використовувати :not(:checked).
:indeterminate
Технічно :indeterminate поки не включений в специфікацію, проте згадується. Згідно специфікації, він являє чекбокс або радіокнопку, які «і не відзначені, і не неотмечены».
Незвично те, що він застосовує стилі лише тоді, коли ви встановлюєте властивість чекбокса .indeterminate допомогою JavaScript, тобто:
document.getElementById(«mycheckbox»).indeterminate = true;
Він не робить ніякого впливу на властивість .checked, яке може бути або правильним (true), або хибним (false).
:indeterminate в деяких ситуацияхможет виявитися корисним. Якщо у вас цілий список чекбоксов, то можна зробити чекбокс «checkall» (виділити все), який при натисканні зазначав б або прибирав позначку з усіх пунктів списку. Однак, якщо зазначити кілька пунктів, то чекбокс «checkall» прийде в невизначений стан indeterminate.
:required
:required застосовує стилі до будь-якого input, у якого є атрибут required і повинен вводитися прямо перед відправкою форми (submit).
: optional
: optional застосовує стилі до будь-якого input, у якого відсутній атрибут required. Не знаю, навіщо його додають, якщо врахувати, що :not(:required) робив би те ж саме?!
:valid
:valid застосовує стилі до будь-якого input, який в даний момент містить достовірні дані.
:invalid
Аналогічно :invalid (або :not(:valid)) застосовує стилі до будь-якого input, який вданный момент містить неправильні дані, наприклад:
input:invalid {
border-color: #900;
}
:in-range(введення чисел і діапазонів)
Числа і діапазони, що містять правильні значення між атрибутами min і max, які кріпляться до значення step, можна вибирати з :in-range. Звичайно, слайдеру трохи складно вийти за межі діапазону, але все ж…
: out-of-range(введення чисел і діапазонів)
: out-of-range выбираетнедостоверныечисловыезначения введення діапазону.
:disabled
input-s з атрибутом disabled можна вибрати за допомогою псевдо-класу :disabled, наприклад:
input:disabled {
color: #ccc;
background-color: #eee;
}
Пам’ятайте, що неактивні поля не піддаються валідації і їх дані не будуть передаватися на сервер. Однак стилі для таких псевдо-класів, як :required :invalid все одно будуть застосовуватися.
:enabled
Подібним же чином, не деактивовані поля можна вибирати з :enabled (або :not(:disabled)). Наділення ж навряд чи вам знадобиться цей селектор, так як він є стилем input за замовчуванням.
:read-only
input-s з атрибутом readonly можна вибрати за допомогою псевдо-класу :read-only. Пам’ятайте про те, що input тільки для читання (read-only) все одно піддаються валідації та відправлення на сервер, але користувач не може змінювати їх значення.
:read-write
Стандартні поля для читання/введення можна вибрати за допомогою :read-write (або :not(:read-only)). Іон теж не з тих селекторів, які можуть вам часто знадобитися.
:default(кнопки відправки)
Нарешті, у нас залишився селектор :default, який застосовує стилі до кнопки відправки за замовчуванням.
Стиль тексту-заповнювач
Призначити стилі атрибуту тексту placeholder можна за допомогою псевдо-елементи ::placeholder з вендорными префіксами (в окремих правилах), наприклад:
input::-webkit-input-placeholder { color: #ccc; }
input::-moz-placeholder { color: #ccc; }
input:-ms-input-placeholder { color: #ccc; }
input::placeholder { color: #ccc; }
Специфіка CSS
Вищезазначені селектори володіють однією специфікою, тому необхідно з обережністю визначати два і більше стилів, застосовних до одного і того ж input-у. Порівняйте:
input:invalid { color: red; }
input:enabled { color: black; }
Тут нам потрібно вибрати всі невірні поля і застосувати червоний текст, але цього ніколи не станеться, так як ми визначили всі активні поля, де далі в таблиці стилів буде чорний текст. Нехай ваші селектори будуть простими і скористайтеся мінімальною кількістю коду. Наприклад, пусте обов’язкове поле :required буде невалидным :invalid, так що йому рідко доведеться призначати стилі.
«Хмарка» валідації
При відправці перше невірне значення виділяється «хмаринкою» з повідомленням про помилку:
Дизайн «хмарки» змінюється в залежності від пристрою браузера, і лише браузери Webkit/Blink дозволяють деякий рівень нестандартної налаштування CSS:
::-webkit-validation-bubble { … }
::-webkit-validation-bubble-arrow { … }
::-webkit-validation-bubble-message { … }
::-webkit-validation-bubble-arrow-clipper { … }
Моя вам порада: навіть не намагайтеся. Якщо вам потрібна клієнтська форматування повідомлень про помилки, то майже напевно доведеться застосувати користувальницькі повідомлення. А для них потрібно JavaScript.
Браузерна підтримка
У загальному і цілому, важливі стилі і селектори працюють у всіх сучасних браузерах від IE10+. Деякі з менш застосовуються, начебто in-range –поки тільки в Webkit/Blink. Більш старі браузери підтримують :focus, але для чогось більш складного вам доведеться передбачити альтернативні варіанти сJavaScript’ом.
Створення відповідних форм
Вищенаведені стилі застосовуються негайно. Наприклад:
input:invalid {
border-color: #900;
}
застосовує до будь-якого невалидному полю червону рамку. На жаль, при першому завантаженні сторінки всі поля можуть бути невалидными, і користувачеві доведеться зіткнутися з жахливим набором червоних блоків.
Я особисто віддаю перевагу, щоб помилки показувалися при відправці або, можливо, при перекладі фокуса з невірно заповненого поля. У браузерів відсутня вбудована можливість зробити це. Ви вже здогадалися — потрібно JavaScript. На щастя, програмний інтерфейс вимушеної валідації HTML5 надає інструменти для:
Припинення валідації до моменту використання форми
Використання інтерфейсу повідомлення про помилку
Не підтримуваних полілфілом niput-ів
Забезпечення альтернативних стилів і валідації для старыхбраузеров і
Створення більш чинних форм
Більш детально ми розглянемо їх в останній із серії цих статей.