Checkbox большого размера
Просто и работает. Только -ms-transform: scale(2); я исключила, потому что IE11 подхватывает и transition, и width/height одновременно.
Теперь, похоже, height и width для checkbox работают во всех современных броузерах. Сейчас проверил в Firefox — тоже сработало как надо, только box все равно размытый. Так что от scale вполне можно отказаться.
- © 2018—2023, 4X_Pro
- Правила
- Обо мне
- Все проекты
- Достижения
Дизайн Replica от Hiitea, сайт работает на Intellect Board Pro 3.05 RC1.
Материалы сайта могут использоваться свободно на условиях лицензии CC BY-NC
Задать вопрос
Здесь можно задать мне вопрос или спросить совета по любой теме, затронутой в блогах или на форуме. После того, как я отвечу, вопрос и ответ появятся в соответствующем разделе. Но не забываем, что я — сторонник slow life, поэтому каких-либо сроков ответов не обещаю. Самые интересные вопросы станут основой для новых тем на форуме или записей в блоге.
Сразу предупреждаю: глупости, провокации, троллинг и тому подобное летит прямо в /dev/null.
- Цитировать
- Копировать
- Поделиться
- Отправить ВК
Как увеличить размер чекбокса и радиокнопки
Как увеличить размер чекбокса и радиокнопки на css? Первое что приходит а ум это width и height, но они не работают. Нужно увеличить размер самой кликабельной части, т.е. кружочек у радио и квадратик у чекбокса.
Отслеживать
124 10 10 бронзовых знаков
задан 28 сен 2013 в 7:27
Самат Жанбеков Самат Жанбеков
821 3 3 золотых знака 11 11 серебряных знаков 36 36 бронзовых знаков
иногда zoom прокатит, а так — рисуйте с пом-ю :before/:after или label. еще вот 456bereastreet.com/lab/form_controls/checkboxes
28 сен 2013 в 7:58
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
Если хотите увеличить без изменения стилизации, достаточно задать такую трансформацию:
По дефолту:
Увеличенные:
Отслеживать
ответ дан 5 сен 2016 в 19:18
Эдик Билый Эдик Билый
169 1 1 серебряный знак 10 10 бронзовых знаков
input[type="checkbox"] input[type="checkbox"] + label span < display:inline-block; width:19px;/*Размер вашей кнопки или чекбокса*/ height:19px; margin:-1px 4px 0 0; vertical-align:middle; background:url(ВАШ СПРАЙТ КНОПОК) left top no-repeat; cursor:pointer; >input[type="checkbox"]:checked + label span
Это пример когда спрайт горизонтальный.
Отслеживать
ответ дан 28 сен 2013 в 8:36
27.6k 5 5 золотых знаков 35 35 серебряных знаков 66 66 бронзовых знаков
тока зачем label for ? когда можно делать
28 сен 2013 в 10:24
Согласен — это необязательно.
28 сен 2013 в 12:11
Попробуйте использовать css:
zoom: 0.5; Отслеживать
8,910 11 11 золотых знаков 31 31 серебряный знак 55 55 бронзовых знаков
ответ дан 12 янв 2017 в 12:42
- html
- css
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.1.3.2953
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
CSS стили для Checkbox
В каждом проекте приходится стилизовать Checkbox, поэтому написал несколько стилей для применения в разных макетах.
Все примеры можно посмотреть на codepen
HTML разметка для примера:
Style A — Родительская label обертка с классом checkbox и классом стилей style-a , используется для того, чтобы активная область была на всех внутренних элементах, то есть можно нажимать не только на сам checkbox, но и на область описания checkbox
— обязательный скрытый input для определения состояния checkbox
— область отметки checkbox
Отметка добавляется через псевдо-элемент :after относительно
— область для описания checkbox, может быть текстом, изображением, элементом и так далее
Небольшое отступление для понимания:
Селектор ~ (тильда) выбирает соседние элементы, находящиеся на том же уровне, но после выбранного элемента
Проще всего понять на примере:
/* Верно */ input ~ .checkbox__checkmark <> /* выбирает .checkbox__checkmark */ input ~ .checkbox__body <> /* выбирает .checkbox__body */ .checkbox__checkmark ~ .checkbox__body <> /* выбирает .checkbox__body */ /* Не верно */ .checkbox__checkmark ~ input <> /* выше расположеный input НЕ БУДЕТ выбран */ .checkbox__body ~ .checkbox__checkmark <> /* выше расположеный .checkbox__checkmark НЕ БУДЕТ выбран */ Также для более логичного поведения при установке размеров элементов использую box-sizing: border-box; для все элементов
*, *::before, *::after
Если в проекте не используете box-sizing: border-box; , то можно установить это свойство только для стилизованного checkbox
/* Для самого блока .checkbox */ .checkbox, .checkbox::before, .checkbox::after < box-sizing: border-box; >/* И для его дочерних элементов */ .checkbox *, .checkbox *::before, .checkbox *::after
Иначе возможны различия с примерами во внешнем виде
Описание стилей
Style A
.checkbox.style-a < display: inline-block; position: relative; padding-left: 25px; /* Так как .checkbox__checkmark имеет position: absolute; оставляем для него свободное место */ cursor: pointer; user-select: none; >/* Скрываем стандарный input */ .checkbox.style-a input < position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; >/* Если input отмечен(:checked), то .checkbox__checkmark(область отметки), применяет данные стили */ .checkbox.style-a input:checked ~ .checkbox__checkmark < background-color: #fff; >/* Если input отмечен(:checked), то псевдо-элемент .checkbox__checkmark:after(отметка-галочка), применяет данные стили */ .checkbox.style-a input:checked ~ .checkbox__checkmark:after < opacity: 1; /* отображаем отметку-галочку */ >/* При наведении(:hover) на всю область checkbox элемент .checkbox__checkmark(область отметки) применяет данные стили*/ .checkbox.style-a:hover input ~ .checkbox__checkmark < background-color: #eee; /* окрашиваем фон в серый цвет*/ >/* При наведении(:hover) на всю область checkbox и при отмеченном input элемент .checkbox__checkmark(область отметки) применяет данные стили*/ .checkbox.style-a:hover input:checked ~ .checkbox__checkmark < background-color: #fff; /* окрашиваем фон в белый цвет*/ >/* Исходные стили для области отметки .checkbox__checkmark */ .checkbox.style-a .checkbox__checkmark < position: absolute; top: 4px; left: 0; height: 16px; width: 16px; background-color: #fff; border: 1px solid #333; transition: background-color 0.25s ease; border-radius: 3px; >/* Исходные стили для отметки .checkbox__checkmark:after */ .checkbox.style-a .checkbox__checkmark:after < content: ""; position: absolute; left: 5px; top: 1px; width: 5px; /* ширина - длина левой линии отметки-галочки */ height: 10px; /* высота - длина правой линии отметки-галочки */ border: solid #333; /* рамка(border) сплошной линией цвета #333 */ border-width: 0 1px 1px 0; /* правая и нижняя рамка(border) по 1px */ transform: rotate(45deg); /* блок наклонен по часовой стрелке на 45 градусов */ opacity: 0; /* изначально скрыта */ transition: opacity 0.25s ease; /* для плавного появления, скрытия, перемещения отметки*/ >/* Исходные стили для области описания .checkbox__body*/ .checkbox.style-a .checkbox__body
Остальные стили
Style B
.checkbox.style-b < display: inline-block; position: relative; padding-left: 30px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; >.checkbox.style-b input < position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; >.checkbox.style-b input:checked ~ .checkbox__checkmark < background-color: #fff; >.checkbox.style-b input:checked ~ .checkbox__checkmark:after < opacity: 1; >.checkbox.style-b:hover input ~ .checkbox__checkmark < background-color: #eee; >.checkbox.style-b:hover input:checked ~ .checkbox__checkmark < background-color: #fff; >.checkbox.style-b .checkbox__checkmark < position: absolute; top: 3px; left: 0; height: 18px; width: 18px; background-color: #fff; border: 2px solid #333; transition: background-color 0.25s ease; border-radius: 4px; >.checkbox.style-b .checkbox__checkmark:after < content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid #333; border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: 0; transition: opacity 0.25s ease; >.checkbox.style-b .checkbox__body
Style C
.checkbox.style-c < display: inline-block; position: relative; padding-left: 30px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; >.checkbox.style-c input < position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; >.checkbox.style-c input:checked ~ .checkbox__checkmark < background-color: #f7cb15; >.checkbox.style-c input:checked ~ .checkbox__checkmark:after < opacity: 1; >.checkbox.style-c:hover input ~ .checkbox__checkmark < background-color: #eee; >.checkbox.style-c:hover input:checked ~ .checkbox__checkmark < background-color: #f7cb15; >.checkbox.style-c .checkbox__checkmark < position: absolute; top: 2px; left: 0; height: 20px; width: 20px; background-color: #eee; transition: background-color 0.25s ease; border-radius: 4px; >.checkbox.style-c .checkbox__checkmark:after < content: ""; position: absolute; left: 8px; top: 4px; width: 5px; height: 10px; border: solid #333; border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: 0; transition: opacity 0.25s ease; >.checkbox.style-c .checkbox__body
Style D
.checkbox.style-d < display: inline-block; position: relative; padding-left: 30px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; >.checkbox.style-d input < position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; >.checkbox.style-d input:checked ~ .checkbox__checkmark < background-color: #f7cb15; >.checkbox.style-d input:checked ~ .checkbox__checkmark:after < opacity: 1; >.checkbox.style-d:hover input ~ .checkbox__checkmark < background-color: #eee; >.checkbox.style-d:hover input:checked ~ .checkbox__checkmark < background-color: #f7cb15; >.checkbox.style-d:hover input ~ .checkbox__body < color: #f7cb15; >.checkbox.style-d .checkbox__checkmark < position: absolute; top: 1px; left: 0; height: 22px; width: 22px; background-color: #eee; transition: background-color 0.25s ease; border-radius: 11px; >.checkbox.style-d .checkbox__checkmark:after < content: ""; position: absolute; left: 9px; top: 5px; width: 5px; height: 10px; border: solid #333; border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: 0; transition: opacity 0.25s ease; >.checkbox.style-d .checkbox__body
Style E
.checkbox.style-e < display: inline-block; position: relative; padding-left: 50px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; >.checkbox.style-e input < position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; >.checkbox.style-e input:checked ~ .checkbox__checkmark < background-color: #f7cb15; >.checkbox.style-e input:checked ~ .checkbox__checkmark:after < left: 21px; >.checkbox.style-e:hover input ~ .checkbox__checkmark < background-color: #eee; >.checkbox.style-e:hover input:checked ~ .checkbox__checkmark < background-color: #f7cb15; >.checkbox.style-e .checkbox__checkmark < position: absolute; top: 1px; left: 0; height: 22px; width: 40px; background-color: #eee; transition: background-color 0.25s ease; border-radius: 11px; >.checkbox.style-e .checkbox__checkmark:after < content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; display: block; background-color: #fff; border-radius: 50%; transition: left 0.25s ease; >.checkbox.style-e .checkbox__body
Style F
.checkbox.style-f < display: inline-block; position: relative; padding-left: 30px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; >.checkbox.style-f input < position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; >.checkbox.style-f input:checked ~ .checkbox__checkmark < background-color: #eee; >.checkbox.style-f input:checked ~ .checkbox__checkmark:after < transform: scale(1); >.checkbox.style-f input:checked ~ .checkbox__body < font-weight: bold; >.checkbox.style-f:hover input ~ .checkbox__checkmark < background-color: #eee; >.checkbox.style-f:hover input:checked ~ .checkbox__checkmark < background-color: #eee; >.checkbox.style-f .checkbox__checkmark < position: absolute; top: 1px; left: 0; height: 22px; width: 22px; background-color: #eee; transition: background-color 0.25s ease; border-radius: 11px; >.checkbox.style-f .checkbox__checkmark:after < content: ""; position: absolute; left: 0px; top: 0px; width: 22px; height: 22px; display: block; background-color: #f7cb15; border-radius: 50%; transform: scale(0); transition: transform 0.25s ease; >.checkbox.style-f .checkbox__body
Style G
.checkbox.style-g < display: inline-block; position: relative; padding-right: 40px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; >.checkbox.style-g input < position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; >.checkbox.style-g input:checked ~ .checkbox__checkmark < background-color: #fff; >.checkbox.style-g input:checked ~ .checkbox__checkmark:after < opacity: 1; left: 8px; >.checkbox.style-g input:checked ~ .checkbox__body < font-weight: bold; >.checkbox.style-g:hover input ~ .checkbox__checkmark < background-color: #eee; >.checkbox.style-g:hover input:checked ~ .checkbox__checkmark < background-color: #eee; >.checkbox.style-g .checkbox__checkmark < position: absolute; top: 1px; right: 0; height: 22px; width: 22px; background-color: #eee; transition: background-color 0.25s ease; border-radius: 4px; >.checkbox.style-g .checkbox__checkmark:after < content: ""; position: absolute; left: -20px; top: -8px; width: 15px; height: 25px; border: solid #f7cb15; border-width: 0 4px 4px 0; transform: rotate(45deg); opacity: 0; transition: opacity 0.25s ease, left 0.25s ease; >.checkbox.style-g .checkbox__body
Style H
.checkbox.style-h < display: block; position: relative; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; >.checkbox.style-h input < position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; >.checkbox.style-h input:checked ~ .checkbox__checkmark < background-color: #f7cb15; >.checkbox.style-h input:checked ~ .checkbox__checkmark:after < opacity: 1; top: -3px; >.checkbox.style-h input:checked ~ .checkbox__body < background-position: 0 0; color: #fff; >.checkbox.style-h:hover input ~ .checkbox__checkmark < background-color: #f7cb15; >.checkbox.style-h:hover input:checked ~ .checkbox__checkmark < background-color: #f7cb15; >.checkbox.style-h:hover .checkbox__body < box-shadow: 5px 5px 10px rgba(0,0,0,0.2); >.checkbox.style-h .checkbox__checkmark < position: absolute; top: 50%; transform: translateY(-50%); left: 15px; height: 22px; width: 22px; background-color: #f7cb15; transition: background-color 0.25s ease; border-radius: 4px; box-shadow: inset 2px 2px 4px rgba(0,0,0,0.1), inset -2px -2px 4px rgba(255,255,255,0.4); >.checkbox.style-h .checkbox__checkmark:after < content: ""; position: absolute; left: 10px; top: -15px; width: 10px; height: 20px; border: solid #fff; border-width: 0 4px 4px 0; transform: rotate(45deg); opacity: 0; transition: opacity 0.25s ease, top 0.25s ease; >.checkbox.style-h .checkbox__body
Style I
.checkbox.style-i < display: block; position: relative; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; padding-left: 65px; >.checkbox.style-i input < position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; >.checkbox.style-i input:checked ~ .checkbox__checkmark < background-color: #49db44; >.checkbox.style-i input:checked ~ .checkbox__checkmark:after < transform: rotate(90deg) translateY(-50%) translateX(-50%); background-color: #49db44; >.checkbox.style-i .checkbox__checkmark < position: absolute; top: 0; left: 0; height: 50px; width: 50px; background-color: #ff0070; transition: background-color 0.25s ease; border-radius: 50%; >.checkbox.style-i .checkbox__checkmark:after < content: ""; position: absolute; left: 50%; top: 50%; width: 80%; height: 12px; border-radius: 6px; transform: rotate(0deg) translateY(-50%) translateX(-50%); transform-origin: left top; background-color: #ff0070; transition: transform 0.25s ease, background-color 0.25s ease; box-shadow: 2px 2px 4px rgba(0,0,0,0.2), -2px -2px 4px rgba(255,255,255,0.6); >.checkbox.style-i .checkbox__body
Как изменить размер чекбокса css
Как увеличить размер checkbox и radio на CSS
22.12.2018 | Категория: Web-мастеру и не только | Автор: ManHunter
На своей практике я неоднократно сталкивался с тем, что дизайнеры web-сайтов бывают очень далеки от реалий жизни. В результате чего при верстке приходится прилагать немалые усилия, чтобы готовый сайт получился максимально похожим на нарисованный макет. Постоянные читатели блога наверняка читали, как можно разукрасить элементы выбора файлов. Сегодня речь пойдет о чекбоксах и радиокнопках, точнее об их нестандартной стилизации. Много лет назад я уже выкладывал нечто подобное, но там размер чекбокса оставался неизменным, да и решение получилось не самое удачное. Сейчас задача заключается в том, чтобы увеличить кликабельную часть checkbox или radio, и решать я ее буду с помощью современных инструментов, а именно на чистом CSS. Заодно проведу работу над ошибками и сделаю стилизацию элементов так, как должно быть.
Начнем с изменения размера. Вариант с изменением атрибутов width или height отпадает сразу, элементы checkbox или radio это игнорируют или же размер поменяется лишь в некоторых версиях каких-то браузеров. Чуть более продвинутый вариант — это увеличение элемента за счет масштабирования. Например:
Но и это не решение. Хорошо справляется с масштабированием только движок WebKit и браузеры на его основе (Chrome и т.п.), а также последние версии Internet Explorer. Браузеры на базе Mozilla тупо растягивают стандартный чекбокс или кругляш, в результате получается просто вырвиглазный ужас. Но даже если такой фокус удастся, при изменении масштаба все равно придется шаманить с положением модифицированного элемента на странице. Не говоря уже о том, что старые браузеры вообще не поддерживают атрибут transform.
Наиболее правильный вариант решения заключается в использовании дополнительных тегов, которые будут отвечать за размер кликабельной области и при этом менять свои стили в зависимости от состояния связанного с ними элемента. Фрагмент HTML-страницы в этом случае будет выглядеть примерно так:
Как видите, добавился тег span. За счет оборачивания всей этой конструкции в тег label, все его содержимое будет кликабельным, что нам и требуется. Исходный чекбокс надо скрыть, сделав его невидимым через свойство visibility:hidden и установив ему отрицательный отступ. Дополнительный span растягивается до нужных размеров, а его фоновый рисунок, как я уже говорил, меняется в зависимости от состояния элемента. Таблица стилей для такого решения будет следующей:
- . 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 большого размера вы можете посмотреть на демонстрационной странице.