Как оформить HTML-переключатели: пошаговое руководство

Радиокнопки HTML являются основным элементом веб-форм, но их внешний вид по умолчанию оставляет желать лучшего. В этом сообщении блога мы рассмотрим один из моих любимых методов настройки внешнего вида переключателей с помощью CSS, создавая более удобный и визуально привлекательный интерфейс.

Давайте начнем со скрытия переключателей!

Нам нужно начать с признания ограничений кроссбраузерного стиля для переключателей. Хотя нас расстраивает то, что мы не можем стилизовать их напрямую, мы можем использовать обходные пути. В этом примере первым шагом является скрытие фактического ввода переключателя. Я знаю, это звучит странно, но мы знаем, что не можем их стилизовать, поэтому нам просто нужно исключить их из уравнения.

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

 input[type="radio"] { border: 0 !important; clip: rect(1px, 1px, 1px, 1px); height: 1px !important; overflow: hidden; padding: 0 !important; position: absolute !important; width: 1px !important; }

Создание пользовательских переключателей

Чтобы создать индивидуальный внешний вид переключателя, мы воспользуемся псевдоэлементом ::before на нашей метке вместе с простым CSS, чтобы создать желаемый вид.

В нашем примере HTML выглядит так:

 <form> <h1>Can We Style HTML Radio Buttons?</h1> <ul> <li> <input type="radio" value="yes" name="option" id="yes" /> <label for="yes">Yes</label> </li> <li> <input type="radio" value="no" name="option" id="no" /> <label for="no">No</label> </li> <li> <input type="radio" value="maybe" name="option" id="maybe" /> <label for="maybe">Maybe</label> </li> </ul> </form>

Для начала мы добавим следующие стили к нашему элементу label:

 label { display: inline-flex; align-items: center; }

Это гарантирует, что после добавления стилей переключателей они будут правильно выровнены по вертикали с текстом метки.

Теперь мы добавим наши ложные переключатели, используя псевдоэлемент ::before :

 label::before { content: ''; display: block; height: 1.25em; width: 1.25em; border: solid 1px #ccc; border-radius: 50%; margin-right: 0.5em; }

На данный момент у нас есть что-то, что начинает напоминать список переключателей, но если мы нажмем на переключатели, мы увидим, что ничего не происходит. Хотя псевдоэлемент визуально напоминает переключатель, ему не хватает интерактивности, поскольку мы еще не обработали проверенное состояние.

Обработка взаимодействия и состояний

Мы можем обрабатывать проверенное состояние с помощью псевдокласса :checked и соседнего одноуровневого селектора на нашей метке:

 input[type="radio"]:checked + label { color: black; }

Для внутренней точки мы можем использовать радиальный градиент нашего псевдоэлемента:

 input[type="radio"]:checked + label::before { background: radial-gradient(0.75em circle at center, currentColor 50%, transparent 55%); box-shadow: 0 0 1em 0 rgba(10, 150, 255, 0.75); border-color: currentColor; }

Итак, теперь, когда мы нажимаем на них, они действуют так же, как родные переключатели. И мы можем улучшить взаимодействие, добавив некоторые эффекты перехода:

 label::before { ... transition: border ease-in 150ms, box-shadow ease-in 150ms; }

Не будем забывать о фокусе

Чтобы улучшить доступность, нам также нужно будет обратить внимание на сфокусированное состояние ложных переключателей. На этот раз нам нужно будет использовать псевдокласс :focus и соседний одноуровневый селектор с меткой:

 input[type="radio"]:checked + label, input[type="radio"]:focus + label { color: black; } input[type="radio"]:focus + label::before { box-shadow: 0 0 1em 0 rgba(10, 150, 255, 0.75); border-color: currentColor; }

Заключение

Следуя этому методу, мы можем создавать стильные и доступные пользовательские переключатели, которые значительно улучшат взаимодействие с пользователем. Эти настраиваемые переключатели не только выглядят лучше стандартных, но также могут обеспечить лучшую обратную связь и взаимодействие при правильной реализации.

Это был довольно простой пример, который, возможно, даже не сильно отличается от родных стилей браузера, но главное в том, что с этой настройкой мы можем делать практически все, что захотим. Так что не стесняйтесь экспериментировать со стилями и адаптировать их к дизайну вашего проекта.

Хотите увидеть это в действии?

Ознакомьтесь с демонстрационным кодом и примерами этой техники в примере с кодовым пером ниже. Если у вас есть какие-либо вопросы или мысли, не стесняйтесь оставлять комментарии.

Помните, что проявив немного творчества и немного CSS, вы можете изменить внешний вид HTML-переключателей в соответствии с вашим дизайном, сохранив при этом доступность и удобство использования!