Продвинутая стилизация форм на чистом CSS

Продвинутая стилизация форм на чистом CSS

От автора: все знают, как работает стилизация формы CSS. Однако существуют редко используемые селекторы, с помощью которых можно стилизовать поля ввода и окружающие элементы. Некоторые из них довольно новые, другие же доступны уже некоторое время.

Живое демо.

placeholder-shown

Продвинутая стилизация форм на чистом CSS

Первый селектор новый и пока что не обладает полной поддержкой в браузерах. Но его легко можно использовать с техникой прогрессивного улучшения. Селектор позволяет определять видимость плейсхолдера для пользователя в данный момент времени. Может быть полезно для динамического скрытия и отображения лейбла поля ввода.

В демо выше я прячу лейбл, пока пользователь не начнет вводить текст, после чего прячется плейсхолдер. Лейбл показывается с помощью прикольного плавного перехода. Чтобы демо выше работало, лейбл должен идти ПОСЛЕ поля ввода.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее
<div class="form-group">
 <input type="text" id="dynamic-label-input" placeholder="Enter some text">
 <label for="dynamic-label-input">Enter some text</label>
</div>
.form-group {
 position: relative;
 padding-top: 1.5rem;
}

label {
 position: absolute;
 top: 0;
 font-size: var(--font-size-small);
 opacity: 1;
 transform: translateY(0);
 transition: all 0.2s ease-out;
}

input:placeholder-shown + label {
 opacity: 0;
 transform: translateY(1rem);
}

required

Продвинутая стилизация форм на чистом CSS

Используйте этот селектор для индикации обязательного поля (атрибут required). Я использую пустой span .help-text и динамически размещаю контент с помощью псевдоэлемента ::before. Это можно было сделать на JS, однако я показываю подход на чистом CSS.

<label for="required-input">Required input</label>
<input type="text" id="required-input" required>
<span class="help-text"></span>
input:required + .help-text::before {
 content: '*Required';
}

optional

Продвинутая стилизация форм на чистом CSS

Противоположность :required. Я опять использую пустой span .help-text для показа необязательного текста, если атрибута required НЕТ.

input:optional + .help-text::before {
 content: '*Optional';
}

disabled

Продвинутая стилизация форм на чистом CSS

Селектор должен быть знаком большинству. Однако о нем нельзя забывать. Очень важно показывать пользователю, активно поле или нет.

&:disabled {
 border-color: var(--gray-lighter);
 background-color: var(--gray-lightest);
 color: var(--gray-light);
}

read-only

Продвинутая стилизация форм на чистом CSS

Поле с атрибутом readonly имеет немного другой смысл, в отличие от disabled. К счастью, у нас есть этот селектор.

<input type="text" value="Read-only value" readonly>
input:read-only {
 border-color: var(--gray-lighter);
 color: var(--gray);
 cursor: not-allowed;
}

valid

Продвинутая стилизация форм на чистом CSS

Большая часть валидаторов форм написана на JS, однако мы можем воспользоваться валидацией форм HTML5 и стилизовать соответственно поля. Селектор позволяет стилизовать любое поле, проходящее правила валидации браузера.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Ниже я кодирую 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

Продвинутая стилизация форм на чистом CSS

Селектор проверяет поле на НЕПРОХОЖДЕНИЕ правил валидации браузера (например, если поле 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.

<label for="invalid-email">Invalid input</label>
<input type="email" id="invalid-email" value="notanemail">
<span class="help-text"></span>
input[type='email']:invalid + .help-text::before {
 content: 'You must enter a valid email.'
}

in-range/:out-of-range

Продвинутая стилизация форм на чистом CSS

Селекторы определяют, входит ли введенное число в диапазон min/max или нет.

<label for="out-of-range-input">Out-of-range input</label>
<input type="number" id="out-of-range-input" min="1" max="10" value="12">
<span class="help-text"> (value must be between 1 and 10)</span>
input:out-of-range + .help-text::before {
 content: 'Out of range';
}

checked

Продвинутая стилизация форм на чистом CSS

Большинство должны знать этот селектор. С его помощью можно применить кастомную стилизацию к чекбоксам и радио кнопкам, когда они активны. Моя техника стилизации чекбоксов включает создание элемента-обертки и размещение label после input.

<div class="checkbox">
 <input type="checkbox"/>
 <label>Option</label>
</div>

Я визуально прячу input, чтобы он исчез, но оставался кликабельным. Далее я стилизую label::before под чекбокс и label::after под галку. С помощью :checked я стилизую оба псевдоэлемента:

&:checked + label::before {
 background-color: var(--color-primary);
}

&:checked + label::after {
 display: block;
 position: absolute;
 top: 0.2rem;
 left: 0.375rem;
 width: 0.25rem;
 height: 0.5rem;
 border: solid white;
 border-width: 0 2px 2px 0;
 transform: rotate(45deg);
 content: '';
}

Знакомство с фреймворком Hi-Q

В моем CSS фреймворке Hi-Q есть парочка полезных стилей для полей, в том числе и чекбоксов, радио кнопок и отключенных полей. С помощью theme builder вы можете визуально следить за изменениями. theme builder – легковесный фреймворк, построенный на CSS переменных, которые можно динамически изменять. Удобно для переключения тем.

Автор: Jonathan Harrell

Источник: https://jonathan-harrell.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree