Radio buttons css

by Mr_Vasu

HTML

<div class="radio-btn-group">

  <label class="radio-button">
    <input type="radio" name="group"><span>Hello</span>
  </label>

  <label class="radio-button">
    <input type="radio" name="group"><span>Hello</span>
  </label>
  <label class="radio-button checkbox">
    <input type="checkbox" name="group"><span>Hello</span>
  </label>

  <label class="radio-button checkbox">
    <input type="checkbox" name="group"><span>Hello</span>
  </label>
</div>

CSS

.radio-btn-group input[type="radio"] {
  position: absolute;
  visibility: hidden;
}

.radio-btn-group input[type="checkbox"] {
  position: absolute;
  visibility: hidden;
}

.radio-button {
  display: block;
  margin-bottom: 10px;
}

.radio-button > span::before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid green;
  vertical-align: middle;
  margin-right: 10px;
  margin-top: -4px;
}

:checked + span::before {
  background-color: tomato;
  box-shadow: inset 0px 0px 0px 2px white, inset 0px 0px 0px 10px tomato;
}

.checkbox > span::before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 4px;
  border: 1px solid green;
  vertical-align: middle;
  margin-right: 10px;
  margin-top: -4px;
}

.checkbox input[type="checkbox"]:checked + span::before {
  background: blue;
}