Как поменять цвет checkbox

Question

Нужно поменять цвет активного чекбокса, как можно поменять?

 <input type="checkbox">

Answer 1

Ответ

Стилизация <input type="checkbox"> и <input type="radio"> делается таким образом. Вы можете конечно найти костыли для прямого изменения input, но это не только не рекомендуется, а ещё и в некоторых браузерах считается ошибкой.

* {
  user-select: none;
}


/* прямые стили к label не связанные с input */

label.any-toggle-style {
  padding: 2vmin;
  background-color: rgb(200, 200, 200);
}


/* взаимодействие с состоянияи input-а */

input[type="checkbox"]:checked+label[role="checkbox"] {
  background-color: rgb(255, 127, 0);
}

input[type="checkbox"]:disabled+label[role="checkbox"] {
  filter: opacity(0.5);
}

<input id="any-toggle-1" type="checkbox" checked hidden>
<label for="any-toggle-1" role="checkbox" class="any-toggle-style">Переключатель</label>
<input id="any-toggle-2" type="checkbox" disabled hidden>
<label for="any-toggle-2" role="checkbox" class="any-toggle-style">Переключатель</label>

Некоторые важные моменты

label должен идти сразу после соответствующего input-а.
Так не только легко понять, но и стилизировать.
Аттрибут role важен.
С помощью аттрибута легко можно будет разделить виды переключателей (checkbox, comobox).
И так же дерево доступности DOM будет сформулирован правильным образом.

БЛОГ НА HUSL

Как поменять цвет checkbox

Ответы (1 шт):

Ответ

Некоторые важные моменты