Как увеличить размер checkbox и radio на CSS
На своей практике я неоднократно сталкивался с тем, что дизайнеры web-сайтов бывают очень далеки от реалий жизни. В результате чего при верстке приходится прилагать немалые усилия, чтобы готовый сайт получился максимально похожим на нарисованный макет. Постоянные читатели блога наверняка читали, как можно разукрасить элементы выбора файлов. Сегодня речь пойдет о чекбоксах и радиокнопках, точнее об их нестандартной стилизации. Много лет назад я уже выкладывал нечто подобное, но там размер чекбокса оставался неизменным, да и решение получилось не самое удачное. Сейчас задача заключается в том, чтобы увеличить кликабельную часть checkbox или radio, и решать я ее буду с помощью современных инструментов, а именно на чистом CSS. Заодно проведу работу над ошибками и сделаю стилизацию элементов так, как должно быть.Начнем с изменения размера. Вариант с изменением атрибутов width или height отпадает сразу, элементы checkbox или radio это игнорируют или же размер поменяется лишь в некоторых версиях каких-то браузеров. Чуть более продвинутый вариант - это увеличение элемента за счет масштабирования. Например:
Code (HTML) : Убрать нумерацию
- <label>
- <input type="checkbox" style="transform:scale(3.0);" /> Option
- </label>
Наиболее правильный вариант решения заключается в использовании дополнительных тегов, которые будут отвечать за размер кликабельной области и при этом менять свои стили в зависимости от состояния связанного с ними элемента. Фрагмент HTML-страницы в этом случае будет выглядеть примерно так:
Code (HTML) : Убрать нумерацию
- <label class="big_chk">
- <input type="checkbox" />
- <span></span>Option
- </label>
Code: Убрать нумерацию
- .big_chk {
- cursor: pointer;
- }
- .big_chk input {
- padding: 0px;
- margin-right:-16px;
- visibility: hidden;
- }
- .big_chk input+span {
- display: inline-block;
- width: 32px;
- height: 32px;
- background: url('sprite.png') left top no-repeat;
- }
- .big_chk input:checked+span {
- background-position: right top;
- }
Таким образом можно увеличивать размеры элементов checkbox и radio, делая их любой формы под любой самый вычурный дизайн. Решение получилось кроссбраузерным, поддерживаются даже старые браузеры. Также к плюсам можно отнести то, что все сделано на чистом CSS, не требуется никаких скриптов. Верстка при этом осталась абсолютно валидной и предсказуемой по расположению элементов. Недостаток заключается только в необходимости использовать собственные рисунки элементов, но это также решает задачу стилизации и единообразия внешнего вида страницы под разными браузерами.
Готовый пример стилизованных элементов формы checkbox и radio большого размера вы можете посмотреть на демонстрационной странице.
Просмотров: 12592 | Комментариев: 2
Внимание! Статья опубликована больше года назад, информация могла устареть!
Комментарии
Отзывы посетителей сайта о статье
zalexstudios
(23.12.2018 в 18:54):
Гений!!!
u-b0at
(21.12.2018 в 23:20):
О! Со «смайлами» классная идея))) Беру на заметку!
Добавить комментарий
Заполните форму для добавления комментария