Доверьте продвижение нам
теги:

Категории

Рубрики

Как изменить 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 с синим фоном и белой галочкой при выборе. Можно изменить цвета и другие свойства, чтобы получить нужный стиль.

Поделиться:

Комментарии

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Задать вопрос

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

Оставить заявку

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