Пользовательские radio / checkbox кнопки с выравниванием

Пользовательские radio / checkbox кнопки с выравниванием

От автора: создание пользовательских кнопок radio / checkbox — непростая задача. Они должны быть доступными, легко настраиваемыми и идеально согласованными с метками.

Вот предварительный просмотр окончательного результата (загрузите компонент пользовательского интерфейса CodyHouse):

Важное правило, которого я стараюсь придерживаться при создании компонентов — начинать с простейшей структуры и добавлять дополнительные элементы (например, родительские контейнеры) только в случае необходимости. Вот все, что нам нужно для переключателей и чек-боксов:

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

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

Структура HTML идентична той, которую мы использовали бы с нативными кнопками, за исключением того, что мы добавляем класс .radio / .checkbox.

Шаг 1 — визуально скрыть нативные кнопки:

Если вы не установите значения top / right / bottom / left для элементов, они удаляются из потока, но не перемещаются. Это важно, потому что в противном случае их положение было бы непредсказуемым и могло бы вызвать прокрутку страницы вверх при нажатии кнопок.

Затем мы собираемся использовать селектор + для выбора и стилизации меток и их псевдо-элементов ::before (пользовательские кнопки):

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

Мы собираемся настроить таргетинг на статус элементов checked и применить стиль к псевдо-элементам меток:

Мы используем свойство background-image для добавления маркеров SVG (через URI данных). Преимущество этого метода в том, что вы можете настроить в CSS толщину иконки (stroke-width=’2′) и ее цвет (stroke=’%23FFFFFF’). Что у нас есть на данный момент:

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

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

Пользовательские radio / checkbox кнопки с выравниванием

Выравнивание

А вот и самая сложная часть: совместить кнопки переключателей / чек-боксов с их метками. Сначала установите для свойства display метки inline-flex и для align-items — flex-start:

Таким образом, мы устранили проблему выравнивания по левому краю, видимую, когда метка разбивается на несколько строк, и мы выровняли кнопки и метки по вертикали вверху:

Пользовательские radio / checkbox кнопки с выравниванием

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

Пользовательские radio / checkbox кнопки с выравниванием

Высота строки сохраняется в var(—checkbox-radio-line-height). Вычисленное значение font-size для метки непредсказуемо (например, мы могли бы изменить его с помощью служебных классов), но для псевдо-элемента label ::before этот font-size всегда будет равен 1em!

Зная высоту, мы можем использовать формулу с очень конкретной величиной, которая выравнивает их с первой строкой метки.

Эта формула совместима с любыми значениями font-size и font-family. Больше никаких случайных и непредсказуемых уловок с отрицательным полем маржей!

Доступность

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

Пользовательские radio / checkbox кнопки с выравниванием

Однако не забудьте включить эффект :focus (пользовательские кнопки не видны):

Автор: Sebastiano Guerriero

Источник: https://codyhouse.co

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

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

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Метки:

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

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

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

Комментирование закрыто.