Радиокнопки HTML являются основным элементом веб-форм, но их внешний вид по умолчанию оставляет желать лучшего. В этом сообщении блога мы рассмотрим один из моих любимых методов настройки внешнего вида переключателей с помощью CSS, создавая более удобный и визуально привлекательный интерфейс.   https://youtu.be/PlldXyuTnUw?embedable=true  Давайте начнем со скрытия переключателей!  Нам нужно начать с признания ограничений кроссбраузерного стиля для переключателей. Хотя нас расстраивает то, что мы не можем стилизовать их напрямую, мы можем использовать обходные пути. В этом примере первым шагом является скрытие фактического ввода переключателя. Я знаю, это звучит странно, но мы знаем, что не можем их стилизовать, поэтому нам просто нужно исключить их из уравнения.  Однако это должно быть сделано в доступной форме, гарантируя, что оно останется функциональным для всех пользователей. Этого можно добиться, используя следующий набор стилей, которые визуально скрывают контент, сохраняя при этом его удобство использования:   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; }  Создание пользовательских переключателей  Чтобы создать индивидуальный внешний вид переключателя, мы воспользуемся псевдоэлементом   на нашей метке вместе с простым CSS, чтобы создать желаемый вид. ::before  В нашем примере 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-переключателей в соответствии с вашим дизайном, сохранив при этом доступность и удобство использования!   https://codepen.io/brianmtreese/pen/bGOGeBJ?embedable=true

Buy Me a Coffee

Этот звук создан на языке оригинала истории!

Слишком долго; Читать

Make resilience your competitive advantage

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

About Author

КОММЕНТАРИИ

БИРКИ

ЭТА СТАТЬЯ БЫЛА ПРЕДСТАВЛЕНА В

Related Stories

Руководство архитектора по созданию эталонной архитектуры для озера данных AI/ML

Valhalla Флоки станет ассоциированным спонсором индийского тура по Шри-Ланке

Плавание по водам: разработка RAG-приложений промышленного уровня с использованием озер данных

Модель Bitcoin UTXO, обеспечивающая работу уникальной экосистемы

Руководство архитектора по созданию эталонной архитектуры для озера данных AI/ML

Valhalla Флоки станет ассоциированным спонсором индийского тура по Шри-Ланке

Плавание по водам: разработка RAG-приложений промышленного уровня с использованием озер данных

Модель Bitcoin UTXO, обеспечивающая работу уникальной экосистемы

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps