Можно ли изменить размер чекбокса с помощью CSS?

Question

Возможно ли задать размер чекбокса с помощью CSS или HTML, чтобы это работало во всех браузерах?

width и size работают в IE6 и выше, но не работают в Firefox, где чекбокс остается размером 16x16, даже если я задаю меньший размер.

Answer 1

Чтобы сделать чекбоксы больше, вы можете использовать CSS-трансформации. Хотя это может выглядеть не совсем аккуратно из-за масштабирования, данный метод будет работать в большинстве современных браузеров. Вот пример кода:

input[type=checkbox] {
  /* Увеличенные чекбоксы */
  -ms-transform: scale(2); /* IE */
  -moz-transform: scale(2); /* Firefox */
  -webkit-transform: scale(2); /* Safari и Chrome */
  -o-transform: scale(2); /* Opera */
  transform: scale(2);
  padding: 10px;
}

/* Возможно, стоит обернуть текст чекбокса в span */
.checkboxtext {
  /* Текст чекбокса */
  font-size: 110%;
  display: inline;
}

И вот HTML-код для чекбоксов:

<input type="checkbox" name="optiona" id="opta" checked />
<span class="checkboxtext">Option A</span>
<input type="checkbox" name="optionb" id="optb" />
<span class="checkboxtext">Option B</span>
<input type="checkbox" name="optionc" id="optc" />
<span class="checkboxtext">Option C</span>

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

Answer 2

Простое решение — использовать свойство zoom:

input[type="checkbox"] {
    zoom: 1.5;
}

<input type="checkbox" />

Такой подход позволит увеличить размер чекбокса в 1.5 раза. Однако стоит обратить внимание, что свойство zoom не является стандартным и может не поддерживаться в некоторых браузерах. Поэтому рекомендуется проверять кроссбраузерность вашего решения.

Answer 3

2020 версия - с использованием псевдоэлементов, размер зависит от размера шрифта.

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

Вот пример кода:

body {
    padding: 0 20px;
}
.big {
    font-size: 50px;
}

/* CSS ниже принуждает размер радио/чекбокса быть таким же, как размер шрифта */
label {
    position: relative;
    line-height: 1.4;
}
/* радио */
input[type=radio] {
    width: 1em;
    font-size: inherit;
    margin: 0;
    transform: translateX(-9999px);
}
input[type=radio] + label:before {
    position: absolute;
    content: '';
    left: -1.3em;
    top: 0;
    width: 1em;
    height: 1em;
    margin: 0;
    border: none;
    border-radius: 50%;
    background-color: #bbbbbb;
}
input[type=radio] + label:after {
    position: absolute;
    content: '';
    left: -1.3em;
    top: 0;
    width: 1em;
    height: 1em;
    margin: 0;
    border: none;
    background-color: white;
    border-radius: 50%;
    transform: scale(0.8);
}
/* проверено */
input[type=radio]:checked + label:before {
    position: absolute;
    content: '';
    left: -1.3em;
    top: 0;
    width: 1em;
    height: 1em;
    margin: 0;
    border: none;
    background-color: #3b88fd;
}
input[type=radio]:checked + label:after {
    position: absolute;
    content: '';
    left: -1.3em;
    top: 0;
    width: 1em;
    height: 1em;
    margin: 0;
    border: none;
    background-color: white;
    border-radius: 50%;
    transform: scale(0.3);
}
/* в фокусе */
input[type=radio]:focus + label:before {
    border: 0.2em solid #8eb9fb;
    margin-top: -0.2em;
    margin-left: -0.2em;
    box-shadow: 0 0 0.3em #3b88fd;
}

/* чекбокс */
input[type=checkbox] {
    width: 1em;
    font-size: inherit;
    margin: 0;
    transform: translateX(-9999px);
}
input[type=checkbox] + label:before {
    position: absolute;
    content: '';
    left: -1.3em;
    top: 0;
    width: 1em;
    height: 1em;
    margin: 0;
    border: none;
    border-radius: 10%;
    background-color: #bbbbbb;
}
input[type=checkbox] + label:after {
    position: absolute;
    content: '';
    left: -1.3em;
    top: 0;
    width: 1em;
    height: 1em;
    margin: 0;
    border: none;
    background-color: white;
    border-radius: 10%;
    transform: scale(0.8);
}
/* проверено */
input[type=checkbox]:checked + label:before {
    position: absolute;
    content: '';
    left: -1.3em;
    top: 0;
    width: 1em;
    height: 1em;
    margin: 0;
    border: none;
    background-color: #3b88fd;
}
input[type=checkbox]:checked + label:after {
    position: absolute;
    content: "\2713";
    left: -1.3em;
    top: 0;
    width: 1em;
    height: 1em;
    margin: 0;
    border: none;
    background-color: #3b88fd;
    border-radius: 10%;
    color: white;
    text-align: center;
    line-height: 1;
}
/* в фокусе */
input[type=checkbox]:focus + label:before {
    border: 0.1em solid #8eb9fb;
    margin-top: -0.1em;
    margin-left: -0.1em;
    box-shadow: 0 0 0.2em #3b88fd;
}

<input type="checkbox" name="checkbox_1" id="ee" checked /> 
<label for="ee">Чекбокс малый</label>

<br />

<input type="checkbox" name="checkbox_2" id="ff" /> 
<label for="ff">Чекбокс малый</label>

<hr />

<div class="big">
    <input type="checkbox" name="checkbox_3" id="gg" checked /> 
    <label for="gg">Чекбокс большой</label>

    <br />

    <input type="checkbox" name="checkbox_4" id="hh" /> 
    <label for="hh">Чекбокс большой</label>
</div>

<hr />

<input type="radio" name="radio_1" id="aa" value="1" checked /> 
<label for="aa">Радио малое</label>

<br />

<input type="radio" name="radio_1" id="bb" value="2" /> 
<label for="bb">Радио малое</label>

<hr />

<div class="big">
    <input type="radio" name="radio_2" id="cc" value="1" checked /> 
    <label for="cc">Радио большое</label>

    <br />

    <input type="radio" name="radio_2" id="dd" value="2" /> 
    <label for="dd">Радио большое</label>
</div>

2017 версия - с использованием zoom или scale

Браузер будет использовать нестандартную функцию zoom, если она поддерживается (отличное качество), или стандартное transform: scale (размытие в Safari) как запасной вариант.

Вот пример кода:

@supports (zoom: 2) {
    input[type="radio"], input[type=checkbox] {
        zoom: 2;
    }
}
@supports not (zoom: 2) {
    input[type="radio"], input[type=checkbox] {
        transform: scale(2);
        margin: 15px;
    }
}
label {
  /* исправление проблем с вертикальным выравниванием */
    display: inline-block;
    vertical-align: top;
    margin-top: 10px;
}

<input type="radio" name="aa" value="1" id="aa" checked /> 
<label for="aa">Радио 1</label>
<br />
<input type="radio" name="aa" value="2" id="bb" /> 
<label for="bb">Радио 2</label>

<br /><br />

<input type="checkbox" name="optiona" id="cc" checked /> 
<label for="cc">Чекбокс 1</label>
<br />
<input type="checkbox" name="optiona" id="dd" /> 
<label for="dd">Чекбокс 2</label>

Таким образом, вы можете создать кастомизированные чекбоксы и радио-кнопки, которые выглядят и ведут себя как элементы по умолчанию, но при этом могут иметь любые размеры и стили, которые вы зададите.

Answer 4

Вы можете сделать скрытый чекбокс с кастомизированным отображением, используя только CSS. Вот пример кода, который может быть полезен:

input[type="checkbox"] {display:none;}
input[type="checkbox"] + label:before {content:"☐";}
input:checked + label:before {content:"☑";}
label:hover {color:blue;}

И HTML:

<input id="check" type="checkbox" /><label for="check">Checkbox</label>

С помощью этого подхода вы можете изменить значение content на любое, что вам нужно, и даже использовать изображение или другой шрифт.

Основные преимущества данного решения:

Размер чекбокса остается пропорциональным размеру текста.
Вы можете контролировать внешний вид, цвет и размер чекбокса.
Не требуется дополнительный HTML!
Всего 3 строки CSS (последний стиль приведен в пример).

Правка: Как упомянуто в комментарии, чекбокс не будет доступен для навигации с помощью клавиатуры. Вам следует добавить tabindex=0 к вашему элементу label, чтобы сделать его доступным для фокуса.

Answer 5

Ваша реализация переключателя (switch) на CSS и HTML выглядит достаточно хорошо. Давайте разберем, что здесь происходит и как это работает.

Объяснение кода

Стили для всех элементов: Первые несколько строк устанавливают базовые правила для всех элементов, включая box-sizing, который упрощает управление размерами.
```
*,*:after,*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
```
Общие стили для переключателя: Класс .switch позволяет центровать переключатель и задает необходимое позиционирование.
```
.switch {
  margin: 50px auto;
  position: relative;
}
```

Стили для метки и input: Используется абсолютное позиционирование для того, чтобы скрыть видимый input и сделать его интерактивным.

.switch label {
  width: 100%;
  height: 100%;
  position: relative;
  display: block;
}

.switch input {
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0;
  opacity: 0;
  z-index: 100;
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

Стили для .demo3 переключателя: Это специфичный класс, который добавляет необходимую ширину, высоту и стиль. Фон и тени помогают сделать переключатель визуально привлекательным.
```
.switch.demo3 {
  width: 180px;
  height: 50px;
}

.switch.demo3 label {
  background: #a5a39d;
  border-radius: 40px;
  box-shadow: inset 0 3px 8px 1px rgba(0,0,0,0.2), 0 1px 0 rgba(255,255,255,0.5);
}
```
Анимация переключения: При активации переключателя (при получении checked) происходит изменение фона и сдвиг метки (i элемент), что добавляет элемент интерактивности.
```
.switch.demo3 input:checked ~ label {
  background: #9abb82;
}

.switch.demo3 input:checked ~ label i {
  right: -1%;
}
```
HTML структура: Каждый переключатель состоит из input и label, что позволяет делать его интерактивным, даже если input скрыт.
```
<div class="switch demo3">
  <input type="checkbox">
  <label><i></i></label>
</div>
```

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

Скрипт идеально демонстрирует, как работают стили и взаимодействия. Вам просто нужно вставить этот код в HTML-страницу или использовать jsFiddle, чтобы увидеть его в действии. Если у вас есть дополнительные вопросы или потребности, не стесняйтесь спрашивать!

Можно ли изменить размер чекбокса с помощью CSS?

5 ответ(ов)

Объяснение кода

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

Руководство по Markdown

Форматирование текста

Код

Списки

Поддерживаемые языки программирования

Популярные

Другие .NET

Базы данных