Par défaut il n’est pas possible de modifier des checkbox et des boutons radio de formulaire.

Pour les styler on va jouer sur les styles du label.

Code de départ

<p>
  <input id="radio1" type="radio" name="radio" checked>
  <label for="radio1">Radio 1 (checked)</label>
</p>
<p>
  <input id="radio2" type="radio" name="radio">
  <label for="radio2">Radio 2</label>
</p>
 
<p>
  <input id="check1" type="checkbox" checked>
  <label for="check1">Checkbox 1 (checked)</label>
</p>
<p>
  <input id="check2" type="checkbox">
  <label for="check2">Checkbox 2</label>
</p>

On masque les checkbox et radio

/* masque les checkbox et radio */
[type="checkbox"]:checked,
[type="checkbox"]:not(:checked),
[type="radio"]:not(:checked),
[type="radio"]:checked {
  position: absolute;
  left: -9999px;
}

On customize le label en css

On va afficher la case à cocher et la coche dans un :before par rapport au label. Voici les styles de base :

/*On customise le label*/
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label,
[type="radio"]:not(:checked) + label,
[type="radio"]:checked + label {
  position: relative;
  cursor: pointer;
  display: inline-block;
  margin-right: 1em;
  line-height: 22px;
}
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before,
[type="radio"]:not(:checked) + label:before,
[type="radio"]:checked + label:before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-right: .5em;
  background: #ccc;
  vertical-align: middle;
  color: transparent;
  font-size: 1em;
  -webkit-transition: .6s;
  transition: .6s;
  text-align: center;
}
[type="radio"]:not(:checked) + label:before,
[type="radio"]:checked + label:before {
  border-radius: 50%;
  font-size: 150%;
}

/*On customise le label quand la case est cochée*/
[type="checkbox"]:checked + label:before,
[type="radio"]:checked + label:before {
  color: #fff;
  background: #2aa1c0;
}

  /*Coche : radio*/
[type="radio"]:checked + label:before {
  content: '22';
}
  /*Coche : checkbox*/
[type="checkbox"]:checked + label:before {
  content: '14';
}

Ensuite on peut ajouter des styles au hover, sur les cases « disabled », voir démonstration :

Démonstration

See the Pen Custom Radio / Checkbox – full CSS by Catherine Plichon (@katplich) on CodePen.

Télécharger

Compatibilité

Cette méthode est compatible pour les navigateurs récents (IE9 et plus).

Les anciens navigateurs, qui ne reconnaissent pas les sélecteurs [type=’checkbox’]:checked ou [type=’checkbox’]:not(:checked) ne vont pas appliquer les styles, et vont afficher des boutons radio et cases à cocher standard.