button as radio button code example

Example 1: radio buttons

<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label>

Example 2: checkbox as radio button

input[type=checkbox]:not(old) + label,
input[type=radio   ]:not(old) + label{
  display      : inline-block;
  margin-left  : -2em;
  line-height  : 4em;
}

Example 3: radio button

<div class="custom-control custom-radio">
  <input type="radio" id="customRadio1" name="customRadio" class="form-check-input" checked>
  <label class="form-check-label" for="customRadio1">Custom radio</label>
</div>

<div class="custom-control custom-radio">
  <input type="radio" id="customRadio2" name="customRadio" class="form-check-input">
  <label class="form-check-label" for="customRadio2">Custom radio</label>
</div>

<div class="custom-control custom-radio">
  <input type="radio" id="customRadio3" name="customRadio2" class="form-check-input" checked disabled>
  <label class="form-check-label" for="customRadio3">Custom radio</label>
</div>

<div class="custom-control custom-radio">
  <input type="radio" id="customRadio4" name="customRadio2" class="form-check-input" disabled>
  <label class="form-check-label" for="customRadio4">Custom radio</label>
</div>

Tags:

Html Example