Форми HTML5: CSS

Від автора: У другій статті з трьох, що оповідають про форми 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 надає інструменти для:

Більш детально ми розглянемо їх в останній із серії цих статей.