i-input-css/i-input.css

Simple Radio and Checkbox (CSS only)

/*
* i-input.css / v1.0.0
* Simple CSS only input component
* https://github.com/YSidorka/i-input.git
* MIT license
* Mon Nov 15 2017
*/
.i-check,
.i-radio {
  padding: 5px 0;
  margin-bottom: 10px
}

.i-check > label,
.i-radio > label {
  cursor: pointer
}

.i-check > label > input:disabled + span,
.i-radio > label > input:disabled + span {
  cursor: default;
  opacity: 1
}

.i-check > label > input:disabled + span:before,
.i-check > label > input:disabled + span:after,
.i-radio > label > input:disabled + span:before,
.i-radio > label > input:disabled + span:after {
  opacity: 0.7
}

.i-radio > label > input[type=radio]:disabled + span:before {
  background: #e0ecec;
}

.i-check > label > input[type=checkbox],
.i-radio > label > input[type=radio] {
  vertical-align: top;
  width: 17px;
  height: 17px;
  margin: 0 3px 0 0
}

.i-check > label > input[type=checkbox]:not(checked),
.i-radio > label > input[type=radio]:not(checked) {
  position: absolute;
  opacity: 0
}

.i-check > label > input[type=checkbox]:not(checked) + span {
  position: relative;
  padding: 0 0 0 60px
}

.i-check > label > input[type=checkbox]:not(checked) + span:before {
  content: '';
  position: absolute;
  top: -4px;
  left: 0;
  width: 50px;
  height: 26px;
  border-radius: 13px;
  background: #cdd;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .2)
}

.i-check > label > input[type=checkbox]:not(checked) + span:after {
  content: '';
  position: absolute;
  top: -2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 10px;
  background: #FFF;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
  transition: all .2s
}

.i-check > label > input[type=checkbox]:checked + span:before {
  background: #0d0
}

.i-check > label > input[type=checkbox]:checked + span:after {
  left: 26px
}

.i-radio > label > input[type=radio]:not(checked) + span {
  position: relative;
  padding: 0 0 0 35px
}

.i-radio > label > input[type=radio]:not(checked) + span:before {
  content: '';
  position: absolute;
  top: -3px;
  left: 0;
  width: 24px;
  height: 24px;
  border: 1px solid #cdd;
  border-radius: 50%;
  background: #fff
}

.i-radio > label > input[type=radio]:not(checked) + span:after {
  content: '';
  position: absolute;
  top: 1px;
  left: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #0d0;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .5);
  opacity: 0;
  transition: all .2s
}

.i-radio > label > input[type=radio]:focus + span:before {
  box-shadow: 0 0 0 3px rgba(255, 255, 0, .5)
}

.i-radio > label > input[type=radio]:checked + span:after {
  opacity: 1
}