Познакомьтесь с новыми и старыми селекторами, которые вы можете использовать для оформления input-элементов формы в зависимости от того, являются ли поля обязательными, правильно заполненными и т. д., – предлагает Джонатан Харрел. Представляем вам адаптированный перевод его статьи.
Общеизвестно, что применять стили CSS к формам всегда было сложно, но есть несколько малоиспользуемых селекторов, дающих нам значительные возможности оформления полей ввода и окружающих элементов. Некоторые из них относительно новые, в то время как другие доступны уже достаточно долго.
Посмотреть пример их использования можно здесь.
:placeholder-shown
Первый селектор относительно новый и еще не полностью поддерживается браузерами. Но представляется, что его можно будет довольно легко использовать в качестве улучшения в будущем. Этот селектор дает нам возможность определять, является ли плейсхолдер в настоящее время видимым для пользователя. Это может пригодиться если мы хотим динамически скрывать и показывать метку, связанную с input.
Здесь я скрываю метку, пока пользователь не начнет печатать в input, скрыв плейсхолдер. Для появления метки я использую красивый эффект перехода. Запомните, чтобы это работало, label должен идти ПОСЛЕ input.
<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
Используйте этот селектор чтобы показать, что поле имеет атрибут required. Здесь я использую пустой span с классом help-text и помещаю некое содержимое динамически, с помощью псевдоэлемента ::before. Собственно, это может быть сделано с JavaScript, но я включил этот пример чтобы показать метод с использованием чистого 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
Если сравнивать с 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
Input с атрибутом 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
Хотя большая часть проверки формы будет осуществляться с помощью JavaScript, мы можем воспользоваться преимуществом HTML5 как для проверки формы, так и для оформления поля ввода. Этот селектор дает нам возможность придать стили любому input, который в настоящее время проходит встроенные правила проверки браузера.
Здесь я пишу код для 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
Этот селектор проверяет, является ли input НЕ проходящим встроенные правила проверки браузера (например, если введенный адрес электронной почты не содержит настоящего 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");
}
Также можно настроить некоторые проверочные сообщения для каждого типа input, воспользовавшись 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
Эти селекторы определяют, находится ли значение числового поля в пределах указанных минимальных/максимальных значений.
<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
Вероятно, вам знаком этот селектор. Он дает возможность применить пользовательские стили к чекбоксам и радиокнопкам. Моя техника оформления чекбоксов включает создание встроенного элемента и помещения 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: '';
}
***
Подписывайтесь на наш канал в Telegram!
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]
класс