Как стилизовать чекбокс с помощью CSS

Да, существует способ сделать это, используя только CSS. Мы можем (в некотором смысле) использовать элемент <label> и стилизовать его вместо этого. Однако следует учесть, что это решение не будет работать в Internet Explorer 8 и более ранних версиях.

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

.myCheckbox input {
  position: relative;
  z-index: -9999; /* Скрываем обычный чекбокс */
}

.myCheckbox span {
  width: 20px;
  height: 20px;
  display: block;
  background: url("link_to_image"); /* Задаем фоновое изображение для чекбокса */
}

.myCheckbox input:checked + span {
  background: url("link_to_another_image"); /* Меняем изображение при выборе чекбокса */
}

А вот HTML-структура:

<label for="test">Label for my styled "checkbox"</label>
<label class="myCheckbox">
  <input type="checkbox" name="test" />
  <span></span>
</label>

В этом решении мы используем элемент <span> для отображения стилей чекбокса. Элемент <input> остается скрытым, а его состояния управляют изменением стиля <span>.

Вы можете избежать добавления лишней разметки. Это решение работает во всех браузерах, кроме Internet Explorer, с помощью CSS-свойства appearance:

input[type="checkbox"] {
  -webkit-appearance: none; /* Для браузеров на основе WebKit */
  -moz-appearance: none;    /* Для Firefox */
  appearance: none;         /* Стандартное свойство CSS */

  /* Стилизация чекбокса */
  width: 16px;
  height: 16px;
  background-color: red;    /* Цвет фона по умолчанию */
}

input[type="checkbox"]:checked {
  background-color: green;   /* Цвет фона при отмеченном состоянии */
}

Используйте такой HTML-код для отображения чекбокса:

<input type="checkbox" />

Таким образом, вы получите кастомизированный чекбокс без необходимости добавления лишней разметки. Однако имейте в виду, что данное решение не будет работать в Internet Explorer.

Мое решение

input[type="checkbox"] {
  cursor: pointer; /* Указатель мыши при наведении */
  -webkit-appearance: none; /* Убираем стандартный вид для WebKit */
  -moz-appearance: none; /* Убираем стандартный вид для Firefox */
  appearance: none; /* Убираем стандартный вид для других браузеров */
  outline: 0; /* Убираем обводку при фокусе */
  background: lightgray; /* Фоновый цвет по умолчанию */
  height: 16px; /* Высота чекбокса */
  width: 16px; /* Ширина чекбокса */
  border: 1px solid white; /* Белая рамка */
}

input[type="checkbox"]:checked {
  background: #2aa1c0; /* Цвет фона, когда чекбокс отмечен */
}

input[type="checkbox"]:hover {
  filter: brightness(90%); /* Показать эффект при наведении */
}

input[type="checkbox"]:disabled {
  background: #e6e6e6; /* Фоновый цвет для выключенного состояния */
  opacity: 0.6; /* Прозрачность */
  pointer-events: none; /* Запретить взаимодействие с элементом */
}

input[type="checkbox"]:after {
  content: ''; /* Псевдоэлемент для отображения галочки */
  position: relative;
  left: 40%; /* Позиция по горизонтали */
  top: 20%; /* Позиция по вертикали */
  width: 15%; /* Ширина галочки */
  height: 40%; /* Высота галочки */
  border: solid #fff; /* Цвет и стиль границы галочки */
  border-width: 0 2px 2px 0; /* Толщина границы */
  transform: rotate(45deg); /* Поворот для создания галочки */
  display: none; /* Скрыть по умолчанию */
}

input[type="checkbox"]:checked:after {
  display: block; /* Показать галочку, когда чекбокс отмечен */
}

input[type="checkbox"]:disabled:after {
  border-color: #7b7b7b; /* Цвет границы галочки для выключенного состояния */
}

<input type="checkbox"><br>
<input type="checkbox" checked><br>
<input type="checkbox" disabled><br>
<input type="checkbox" disabled checked><br>

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

Вы можете просто использовать appearance: none в современных браузерах, чтобы избавиться от стандартного стиля и корректно применить все ваши стили:

input[type=checkbox] {
  -webkit-appearance: none; /* Для WebKit-браузеров */
  -moz-appearance: none;    /* Для Firefox */
  appearance: none;         /* Для остальных современных браузеров */
  display: inline-block;      /* Отображение как встроенный блок */
  width: 2em;                /* Ширина чекбокса */
  height: 2em;               /* Высота чекбокса */
  border: 1px solid gray;    /* Граница */
  outline: none;             /* Убираем обводку */
  vertical-align: middle;    /* Выравнивание по центру */
}

input[type=checkbox]:checked {
  background-color: blue;    /* Цвет фона при отметке чекбокса */
}

Этот код убирает стандартное оформление чекбокса, позволяя вам полностью контролировать его внешний вид.

Вот простое решение на CSS без использования jQuery или JavaScript.

Я использую иконки FontAwesome, но вы можете использовать любое изображение.

input[type=checkbox] {
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  visibility: hidden;
  font-size: 14px;
}

input[type=checkbox]:before {
  content: @fa-var-square-o; /* Здесь используется иконка незакрепленного чекбокса */
  visibility: visible;
  /*font-size: 12px;*/
}

input[type=checkbox]:checked:before {
  content: @fa-var-check-square-o; /* Здесь используется иконка закрепленного чекбокса */
}

Этот код создает стиль чекбокса, заменяя стандартное отображение на иконки FontAwesome. Чекбоксы остаются невидимыми, и при выборе чекбокса отображается другая иконка. Обратите внимание, что для работы требуется правильно подключенная библиотека FontAwesome.