CustomRadioAndCheckbox

Basic Usage

          
<link rel="stylesheet" href="custom-radio-checkbox.css">

<label for="radio-1" class="radio-wrapper">
  <span class="radio">
    <input type="radio" name="" id="radio-1" class="radio-input">
    <span class="radio-inner"></span>
  </span>
  <span class="label-text">优</span>
</label>

Demo

Basic Usage

          
<link rel="stylesheet" href="custom-radio-checkbox.css">

<label for="checkbox-1" class="checkbox-wrapper">
  <span class="checkbox">
    <input type="checkbox" name="" id="checkbox-1" class="checkbox-input">
    <span class="checkbox-inner"></span>
</span>
  <span class="label-text">Beijing</span>
</label>

<label for="checkbox-2" class="checkbox-wrapper">
  <span class="checkbox">
    <input type="checkbox" name="" id="checkbox-2" class="checkbox-input">
    <span class="checkbox-inner"></span>
</span>
  <span class="label-text">shanghai</span>
</label>

<label for="checkbox-3" class="checkbox-wrapper">
  <span class="checkbox">
    <input type="checkbox" name="" id="checkbox-3" class="checkbox-input">
    <span class="checkbox-inner"></span>
</span>
  <span class="label-text">guangzhou</span>
</label>

Demo