Стилизация чекбоксов и радиокнопок при помощи CSS

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

Другими словами — в современных браузерах чекбоксы и радиокнопки будут выглядеть красиво, в соответствии с задуманным дизайном, а в старых (это относится к Internet Explorer версии 8 и ниже) они останутся с оформлением «по умолчанию», характерным для каждой конкретной операционной системы.

Фокус заключается в использовании псевдоселекторов :checked и :not. При этом сам чекбокс или радиокнопка делаются невидимыми, а их эмуляция осуществляется с помощью псевдоселекторов :before и :after для тега , который, как мы знаем, переключает состояния элемента формы, если он привязан к нему через атрибут for.

В HTML-коде это выглядит следующим образом:

При этом важно, чтобы тег <label> обязательно был расположен после тега <input>.

Далее в дело вступает CSS. В комментариях к коду для чекбокса я написал пояснения:

Для радиокнопки будет по сути то же самое:

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

Пример работы

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

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