Как оформить checkbox?

Question

[Матвей Томилов]

Можно ли задать цвет чебоксу?

Comments

[automatik]

Такой "чекбокс" вызывает диссонанс у пользователя, потому что выглядит как radiobutton.

[Матвей Томилов]

automatik: верно, моя ошибка, мне нужен был radio, но примеры похожие. Мне просто нужно было показать в какую сторону гуглить.

Answer 1

[Stalker_darkway]

label, before, after ваши лучшие помощники)

Comments

[Матвей Томилов]

Это типа убрать чебокс, и создать две картинки для офф и он, что ли?

[Андрей Б.]

Матвей Томилов один из вариантов https://jsfiddle.net/9pmxcy3t/

[Сергей delphinpro]

Матвей Томилов: https://www.yandex.ru/yandsearch?text=customized%2...

[Матвей Томилов]

Андрей Б.: Спасибо!

[Сергей delphinpro]

Матвей Томилов: и куча готовых реализаций, даже думать не надо
https://codepen.io/search/pens/?q=radio%20button&l...

[Stalker_darkway]

https://jsfiddle.net/Nasuvaika/fnrkmwLx/1/

[Stalker_darkway]

Можно как с помощью JQuery сделать, так и просто стилями обойтись. У меня скрипт, но лучше стилями.

Answer 2

[Faber Estello]

<input type="checkbox" name="ch" id="ch">
<label for="ch"></label>

label {
  display: block;
  width: 20px;
  height: 20px;
  background: #fff;
  border:2px solid red;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
}

label:after {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  background: red;
  border-radius: 50%;
  position: absolute;
  top:0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 5px;
  display: none;
}

input[type="checkbox"]{
  display: none;
}

input[type="checkbox"]:checked~label:after {
  display: block;
}

jsbin

Comments

[Матвей Томилов]

Спасибо!