Как увеличить checkbox css

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

На своей практике я неоднократно сталкивался с тем, что дизайнеры 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 >

1. . big_chk
2. cursor : pointer ;
3. >
4. . big_chk input
5. padding : 0px ;
6. margin — right :- 16px ;
7. visibility : hidden ;
8. >
9. . big_chk input + span
10. display : inline — block ;
11. width : 32px ;
12. height : 32px ;
13. background : url ( ‘sprite.png’ ) left top no — repeat ;
14. >
15. . big_chk input : checked + span
16. background — position : right top ;
17. >

Для удобства я использовал фоновый рисунок в виде горизонтального двухпозиционного спрайта. На неотмеченном элементе отображается левая половина фона, а при установке отметки фон сдвигается на правую половину. Естественно, это все можно сделать и с указанием точных позиций спрайта.

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

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

CSS стили для Checkbox

В каждом проекте приходится стилизовать Checkbox, поэтому написал несколько стилей для применения в разных макетах.

Все примеры можно посмотреть на codepen

HTML разметка для примера:

<label > — Родительская label обертка с классом checkbox и классом стилей style-a , используется для того, чтобы активная область была на всех внутренних элементах, то есть можно нажимать не только на сам checkbox, но и на область описания checkbox

<input type=»checkbox» checked=»checked»/> — обязательный скрытый input для определения состояния checkbox

<div > — область отметки checkbox

Отметка добавляется через псевдо-элемент :after относительно <div >

<div > — область для описания checkbox, может быть текстом, изображением, элементом и так далее

Небольшое отступление для понимания:

(тильда) выбирает соседние элементы, находящиеся на том же уровне, но после выбранного элемента

Проще всего понять на примере:

Также для более логичного поведения при установке размеров элементов использую box-sizing: border-box; для все элементов

Если в проекте не используете box-sizing: border-box; , то можно установить это свойство только для стилизованного checkbox

Усеченный многострочный текст с кнопкой «показать больше» (только с помощью CSS)

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

То есть поддерживает ли он следующее:

Кнопку «Показать больше», которая отображает полный текст при нажатии

text-overflow: ellipsis не поддерживает несколько строк, но я вспомнил о свойстве line-clamp, которое можно использовать для получения многострочного усеченного текста. К счастью, на CSS Tricks есть хорошая рабочая демо-версия, плюс поддержка браузерами теперь довольно приличная. Здорово!

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

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

А как насчет кнопки «показать больше»?

Создание кнопки «показать больше» требует некоторой нестандартной хакерской работы с CSS. Я не мог использовать button или тег <a>, так как это работа для печально известного хака с чек-боксом, и для этого потребовался элемент метки и… чек-бокс! Итак, я получил следующую разметку:

Поскольку я установил чек-бокс прямо перед абзацем, теперь я мог бы использовать псевдо-класс :checked для переключения, например так:

И действительно, это сделало именно то, что я хотел: нажмите кнопку, и мы переключаемся с усеченного текста к полному. Красиво.

Но… но… но это хак, а что насчет a11y??

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

Я хочу, чтобы мои примеры и демонстрации были как можно более доступными, поэтому, чтобы решить эту проблему, я сначала сделал чек-бокс focusable / tabbable, хотя все еще невидимым, например, так:

Как увеличить размер чекбокса и радиопки

Как увеличить размер чекбокса и радиопки на css? Первое что приходит а ум это width и height, но они не работают. Нужно увеличить размер самой кликабельной части, т.е. кружочек у радио и квадратик у чекбокса.

Если хотите увеличить без изменения стилизации, достаточно задать такую трансформацию:

Это пример когда спрайт горизонтальный.

Попробуйте использовать css:

Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css или задайте свой вопрос.

дизайн сайта / логотип © 2022 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2022.1.7.41110

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.