Custom Radio

by godfrzero

HTML

<label class="pm-radio-input">
  <input type="radio" name="some_radio" />
  <div class="pm-radio"></div>
  Potato
</label>

<label class="pm-radio-input">
  <input type="radio" name="some_radio" />
  <div class="pm-radio"></div>
  Onion
</label>

<label class="pm-radio-input">
  <input type="radio" name="some_radio" />
  <div class="pm-radio"></div>
  Cucumber
</label>

CSS

.pm-radio-input {
  position: relative;
  display: block;
}

.pm-radio-input input[type="radio"],
.pm-radio-input .pm-radio {
  width: 30px;
  height: 30px;
  margin: 0 10px 0 0;
  vertical-align: middle;
}

.pm-radio-input .pm-radio {
  position: absolute;
  left: 0;
  display: inline-block;
  border-radius: 50%;
  background: #097bed;
  box-shadow: 0 1px 1px #097bed,
              0 -1px 1px #097bed,
              1px 0px 1px #097bed,
              -1px 0px 1px #097bed;
  border: solid 15px #d8d8d8;
  box-sizing: border-box;
  cursor: pointer;
  
  transition: border linear 0.04s;
}

.pm-radio-input input[type="radio"]:checked + .pm-radio {
  border-width: 7px;
}

@media (max-width: 768px) {
  .pm-radio-input input[type="radio"],
  .pm-radio-input .pm-radio {
    height: 20px;
    width: 20px;
  }
  
  .pm-radio-input .pm-radio {
    border-width: 10px;
  }
  
  .pm-radio-input input[type="radio"]:checked + .pm-radio {
    border-width: 5px;
  }
}