HTML Form How to - Custom radio buttons

Question

We would like to know how to custom radio buttons.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
input[type="radio"] {
  display: none;
}<!--from w w  w  .j  ava  2s . co m-->

input[type="radio"]+i:before {
  content: '\2718';
  color: red;
}

input[type="radio"]:checked+i:before {
  content: '\2713';
  color: green;
}
/* only to get the list vertical */
.vertical-group>label {
  display: block
}
</style>
</head>
<body>
  <div class="vertical-group">
    <label> 
    <input type="radio" name="rg" /><i></i> option 1
    </label> 
    <label> <input type="radio" checked name="rg" /><i></i>option 2
    </label> 
    <label> <input type="radio" name="rg" /><i></i> option 3
    </label>
  </div>
</body>
</html>

The code above is rendered as follows: