Как изменить checkbox CSS

Чтобы изменить стиль checkbox, можно использовать CSS. Вот пример:

HTML:

<input type="checkbox" id="myCheckbox">
<label for="myCheckbox">Мой checkbox</label>

CSS:

/* Скрыть оригинальный checkbox */
input[type="checkbox"] {
  display: none;
}

/* Создать стилизованный checkbox */
label {
  display: inline-block;
  position: relative;
  padding-left: 25px;
  margin-right: 15px;
  cursor: pointer;
  font-size: 18px;
  user-select: none;
}

label:before {
  content: "";
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  border: 2px solid #ccc;
  background-color: #fff;
}

/* Изменить стиль checkbox при выборе */
input[type="checkbox"]:checked + label:before {
  background-color: #007bff;
  border-color: #007bff;
}

/* Изменить стиль текста при выборе */
input[type="checkbox"]:checked + label {
  color: #007bff;
}

Этот код создаст стилизованный checkbox с синим фоном и белой галочкой при выборе. Можно изменить цвета и другие свойства, чтобы получить нужный стиль.

реклама

Качественный хостинг сайтов

реклама

Получите консультацию нашего маркетолога

Изучит ваш проект, подберет подходящие услуги и тарифы

Получите бесплатный аудит

Наш специалист сделает базовый аудит вашего проекта и предложит персональные предложения.

Закажите услугу Как изменить checkbox CSS

Наш специалист свяжется с вами в ближайшее время и уточнит детали