CSS

Skinner un checkbox ou radio en full CSS

custom-checkbox-radio

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: '\2022';
}
  /*Coche : checkbox*/
[type="checkbox"]:checked + label:before {
  content: '\2714';
}

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.

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *