Від автора: всі знають, як працює стилізація форми CSS. Однак існують рідко використовувані селектори, з допомогою яких можна стилізувати поля введення і навколишні елементи. Деякі з них досить нові, інші ж доступні вже деякий час.
Живе демо.
placeholder-shown
Перший селектор новий і поки що не володіє повною підтримкою в браузерах. Але його легко можна використовувати з технікою прогресивного поліпшення. Селектор дозволяє визначати видимість плейсхолдера для користувача в даний момент часу. Може бути корисно для динамічного приховування та відображення лейблу поля вводу.
У демо вище я ховаю лейбл, поки користувач не почне вводити текст, після чого ховається плейсхолдер. Лейбл показується за допомогою прикольного плавного переходу. Щоб демо вище працювало, лейбл повинен йти ПІСЛЯ поля вводу.
.form-group {
position: relative;
padding-top: 1.5 rem;
}
label {
position: absolute;
top: 0;
font-size: var(–font-size-small);
opacity: 1;
transform: translateY(0);
transition: all 0.2 s ease-out;
}
input:placeholder-shown + label {
opacity: 0;
transform: translateY(1rem);
}
required
Використовуйте цей селектор для індикації обов’язкового поля (атрибут required). Я використовую порожній span .help-text і динамічно розміщую контент за допомогою псевдоэлемента ::before. Це можна було зробити на JS, однак я показую підхід на чистому CSS.
Required input
input:required + .help text::before {
content: ‘*Required’;
}
optional
Протилежність :required. Я знову використовую порожній span .help-text для показу необов’язкового тексту, якщо атрибута required НЕМАЄ.
input:optional + .help text::before {
content: ‘*Optional’;
}
disabled
Селектор повинен бути знайомий більшості. Однак про нього не можна забувати. Дуже важливо показувати користувачу, активно поле чи ні.
&:disabled {
border-color: var(–gray-lighter);
background-color: var(–gray-lightest);
color: var(–gray-light);
}
read-only
Поле з атрибутом readonly має трохи інший сенс, на відміну від disabled. На щастя, у нас є цей селектор.
input:read-only {
border-color: var(–gray-lighter);
color: var(–gray);
cursor: not-allowed;
}
valid
Велика частина валідаторів форм написана на PHP, проте ми можемо скористатися валідацією форм HTML5 і стилізувати відповідно поля. Селектор дозволяє стилізувати будь-яке поле, що проходить правила валідації браузера.
Нижче я кодуй svg для відображення чекбокса в поле вводу з допомогою властивості background-image.
input:valid {
border-color: var(–color-primary);
background-image: url(“data:image/svg+xml,%3Csvg width=’45px’ height=’34px’ viewBox=’0 0 45 34′ version=’1.1′ xmlns=’http://www.w3.org/2000/svg’ xmlns:xlink=’http://www.w3.org/1999/xlink’%3E%3Cg stroke=’none’ stroke-width=’1′ fill=’none’ fill-rule=’evenodd’%3E%3Cg transform=’translate%28-56.000000, -59.000000%29′ fill=’%232EEC96’%3E%3Cpolygon points=’70.1468531 85.8671329 97.013986 59 100.58042 62.5664336 70.1468531 93 56 78.8531469 59.5664336 75.2867133’%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A”);
}
invalid
Селектор перевіряє поле на НЕПРОХОДЖЕННЯ правил валідації браузера (наприклад, якщо поле email не містить електронну пошту).
Тут я кодуй svg для відображення «х» в полі вводу.
input:invalid {
border-color: var(–color-error);
background-image: url(“data:image/svg+xml,%3Csvg width=’30px’ height=’30px’ viewBox=’0 0 30 30′ version=’1.1′ xmlns=’http://www.w3.org/2000/svg’ xmlns:xlink=’http://www.w3.org/1999/xlink’%3E%3Cg stroke=’none’ stroke-width=’1′ fill=’none’ fill-rule=’evenodd’%3E%3Cg transform=’translate%28-128.000000, -59.000000%29′ fill=’%23F44336’%3E%3Cpolygon points=’157.848404 61.9920213 145.980053 73.8603723 157.848404 85.7287234 154.856383 88.7207447 142.988032 76.8523936 131.119681 88.7207447 128.12766 85.7287234 139.996011 73.8603723 128.12766 61.9920213 131.119681 59 142.988032 70.8683511 154.856383 59’%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A”);
}
Я також можу налаштувати повідомлення валідації для кожного типу поля з допомогою span .help-text і псевдоэлемента ::before.
Invalid input
input[type=’email’]:invalid + .help text::before {
content: ‘You must enter a valid email.’
}
in-range/:out-of-range
Селектори визначають, чи є введене число в діапазон min/max чи ні.
Out-of-range input
(value must be between 1 and 10)
input:out-of-range + .help text::before {
content: ‘Out of range’;
}
checked
Більшість повинні знати цей селектор. З його допомогою можна застосувати кастомний стилізацію до чекбоксам і радіо кнопок, коли вони активні. Моя техніка стилізації чекбоксов включає створення елемента-обгортки і розміщення label після input.
Я візуально ховаю input, щоб він зник, але залишався кликабельним. Далі я стилизую label::before під чекбокс і label::after під галку. З допомогою :checked я стилизую обидва псевдоэлемента:
&:checked + label::before {
background-color: var(–color-primary);
}
&:checked + label::after {
display: block;
position: absolute;
top: 0.2 rem;
left: 0.375 rem;
width: 0.25 rem;
height: 0.5 rem;
border: solid white;
border-width: 2px 0 2px 0;
transform: rotate(45deg);
content: “;
}
Знайомство з фреймворком Hi-Q
В моєму CSS фреймворку Hi-Q є парочка корисних стилів для полів, у тому числі і чекбоксов, радіо кнопок і відключених полів. З допомогою theme builder ви можете візуально стежити за змінами. theme builder – легкий фреймворк, побудований на CSS змінних, які можна динамічно змінювати. Зручно для перемикання тим.
