Blog. Just Blog

Как увеличить размер checkbox и radio на CSS

Версия для печати Добавить в Избранное Отправить на E-Mail | Категория: Web-мастеру и не только | Автор: ManHunter
На своей практике я неоднократно сталкивался с тем, что дизайнеры web-сайтов бывают очень далеки от реалий жизни. В результате чего при верстке приходится прилагать немалые усилия, чтобы готовый сайт получился максимально похожим на нарисованный макет. Постоянные читатели блога наверняка читали, как можно разукрасить элементы выбора файлов. Сегодня речь пойдет о чекбоксах и радиокнопках, точнее об их нестандартной стилизации. Много лет назад я уже выкладывал нечто подобное, но там размер чекбокса оставался неизменным, да и решение получилось не самое удачное. Сейчас задача заключается в том, чтобы увеличить кликабельную часть checkbox или radio, и решать я ее буду с помощью современных инструментов, а именно на чистом CSS. Заодно проведу работу над ошибками и сделаю стилизацию элементов так, как должно быть.

Начнем с изменения размера. Вариант с изменением атрибутов width или height отпадает сразу, элементы checkbox или radio это игнорируют или же размер поменяется лишь в некоторых версиях каких-то браузеров. Чуть более продвинутый вариант - это увеличение элемента за счет масштабирования. Например:
  1. <label>
  2.     <input type="checkbox" style="transform:scale(3.0);" /> Option
  3. </label>
Но и это не решение. Хорошо справляется с масштабированием только движок WebKit и браузеры на его основе (Chrome и т.п.), а также последние версии Internet Explorer. Браузеры на базе Mozilla тупо растягивают стандартный чекбокс или кругляш, в результате получается просто вырвиглазный ужас. Но даже если такой фокус удастся, при изменении масштаба все равно придется шаманить с положением модифицированного элемента на странице. Не говоря уже о том, что старые браузеры вообще не поддерживают атрибут transform.

Наиболее правильный вариант решения заключается в использовании дополнительных тегов, которые будут отвечать за размер кликабельной области и при этом менять свои стили в зависимости от состояния связанного с ними элемента. Фрагмент HTML-страницы в этом случае будет выглядеть примерно так:
  1. <label class="big_chk">
  2.     <input type="checkbox" />
  3.     <span></span>Option
  4. </label>
Как видите, добавился тег span. За счет оборачивания всей этой конструкции в тег label, все его содержимое будет кликабельным, что нам и требуется. Исходный чекбокс надо скрыть, сделав его невидимым через свойство visibility:hidden и установив ему отрицательный отступ. Дополнительный span растягивается до нужных размеров, а его фоновый рисунок, как я уже говорил, меняется в зависимости от состояния элемента. Таблица стилей для такого решения будет следующей:
  1. .big_chk {
  2.     cursorpointer;
  3. }
  4.  
  5. .big_chk input {
  6.     padding0px;
  7.     margin-right:-16px;
  8.     visibilityhidden;
  9. }
  10.  
  11. .big_chk input+span {
  12.     displayinline-block;
  13.     width32px;
  14.     height32px;
  15.     backgroundurl('sprite.png'left top no-repeat;
  16. }
  17.  
  18. .big_chk input:checked+span {
  19.     background-positionright top;
  20. }
Для удобства я использовал фоновый рисунок в виде горизонтального двухпозиционного спрайта. На неотмеченном элементе отображается левая половина фона, а при установке отметки фон сдвигается на правую половину. Естественно, это все можно сделать и с указанием точных позиций спрайта.

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

Готовый пример стилизованных элементов формы checkbox и radio большого размера вы можете посмотреть на демонстрационной странице.

Поделиться ссылкой ВКонтакте Поделиться ссылкой на Facebook Поделиться ссылкой на LiveJournal Поделиться ссылкой в Мой Круг Добавить в Мой мир Добавить на ЛиРу (Liveinternet) Добавить в закладки Memori Добавить в закладки Google
Просмотров: 736 | Комментариев: 2

Комментарии

Отзывы посетителей сайта о статье
zalexstudios (23.12.2018 в 18:54):
Гений!!!
u-b0at (21.12.2018 в 23:20):
О! Со «смайлами» классная идея))) Беру на заметку!

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

Заполните форму для добавления комментария
Имя*:
Текст комментария (не более 2000 символов)*:

*Все поля обязательны для заполнения.
Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2019
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.07 сек. / MySQL: 2 (0.0032 сек.) / Память: 4.75 Mb
Наверх