Comment faire des cases à cocher élégantes et des boutons radio avec CSS3

• Introduction
• Soyez fort. Masquez vos cases à cocher
• Boutons Radio
• Cases à cocher
• Résultat final
• Conclusion

Introduction

Nous connaissons tous les cases à cocher et boutons radio HTML. La chose la plus frustrante à leur sujet, c'est qu'il n'y a aucun moyen pour nous de changer leur apparence. Ils ont un aspect différent selon votre système d'exploitation et votre navigateur, et nous ne pouvons pas les styler en utilisant CSS.

Cela peut être ennuyeux pour la plupart des concepteurs, qui veulent rendre ces éléments attrayants, afin qu'ils ne gâchent pas le design. Dans ce tutoriel, je vais vous montrer comment les rendre vraiment mignons avec un truc simple.

Soyez fort. Masquez vos cases à cocher

Cela peut paraître contre-intuitif, mais pour que nos cases à cocher et nos boutons radio soient beaux, nous devons les cacher et les oublier ! Oui, ils n'ont plus besoin de rester, donc nous appliquons simplement une règle simple :

.section input[type="radio"],
.section input[type="checkbox"]{
  display: none;
}

Mais, qu'allons-nous faire sans eux ? Aucun soucis, nous allons construire nos propres cases à cocher, avec le blackjack et ... bien, passons juste devant.

Boutons Radio

Tout d'abord, il y a notre marge :

<section id="first" class="section">
    <div class="container">
      <input type="radio" name="group1" id="radio-1">
      <label for="radio-1"><span class="radio">Coffee</span></label>
    </div>
    <div class="container">
      <input type="radio" name="group1" id="radio-2">
      <label for="radio-2"><span class="radio">Tea</span></label>
    </div>
    <div class="container">
      <input type="radio" name="group1" id="radio-3">
      <label for="radio-3"><span class="radio">Cappuccino</span></label>
    </div>
</section>

Nous avons une section où nous allons contenir trois boutons radio. Nous allons couvrir les cases à cocher plus loin dans ce tutoriel, le principe est le même. Chaque entrée est enveloppée dans un div avec un container class. En outre, chaque entrée a une étiquette avec une portée en elle.

Important !

Puisque nous avons caché les entrées radio et cases à cocher, la seule façon pour nous d'y accéder serait d'utiliser une label tag. Pour fonctionner correctement, le label doit contenir l'attribut for avec l'identifiant de l'entrée correspondante. Si une entrée a un ID radio-1, alors l'attribut for devrait aussi être radio-1.

Vous vous demandez peut-être pourquoi j'ai enveloppé le texte à l'intérieur de chaque label dans un span :

<div class="container">
      <input type="radio" name="group1" id="radio-1">
      <label for="radio-1"><span class="radio">Coffee</span></label>
</div>

Puisque nous allons créer des boutons radio avec les pseudo-éléments ::before et ::after, nous avons besoin d'un élément parent, sur la base duquel ils peuvent être positionnés. Dans ce cas, ce sera notre label :

.container label {
  position: relative;
}

Voici un ensemble de styles partagés entre les cases à cocher et les boutons radio :

.container span::before,
.container span::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

Les propriétés du haut et du bas sont mises à zéro et combinées avec margin: auto; ce qui permet à nos éléments d'avoir une position horizontale centrée.

Voici à quoi ressemble le reste des styles :

.container span.radio:hover {
  cursor: pointer;
}
.container span.radio::before {
  left: -52px;
  width: 45px;
  height: 25px;
  background-color: #A8AAC1;
  border-radius: 50px;
}
.container span.radio::after {
  left: -49px;
  width: 17px;
  height: 17px;
  border-radius: 10px;
  background-color: #6C788A;
  transition: left .25s, background-color .25s;
}
input[type="radio"]:checked + label span.radio::after {
  left: -27px;
  background-color: #EBFF43;
}

La partie la plus importante est la dernière série de règles, qui fait tout le tour. La pseudo-classe :checked nous permet d'apporter des modifications aux éléments lorsque l'entrée est cochée. Avec un sélecteur '+', nous pouvons choisir l'élément frère suivant, et cibler notre span.radio, où nous appliquons de nouvelles règles au pseudo-élément ::after. Dans ce cas, nous changeons sa position horizontale et sa couleur.

Afin de rendre le changement plus fluide, nous assignons la transition de 0,25 seconde à la propriété de gauche et à la couleur de fond. Maintenant, lorsque nous cliquons sur le bouton radio, l'interrupteur se déplace doucement au lieu de sauter rapidement.

Cases à cocher

Si vous devez créer des cases à cocher personnalisées, la méthode est la même. Jetez un oeil sur les styles :

.container span.checkbox::before {
  width: 27px;
  height: 27px;
  background-color: #fff;
  left: -35px;
  box-sizing: border-box;
  border: 3px solid transparent;
  transition: border-color .2s;
}
.container span.checkbox:hover::before {
  border: 3px solid #F0FF76;
}
.container span.checkbox::after {
  content: '\f00c';
  font-family: 'FontAwesome';
  left: -31px;
  top: 2px;
  color: transparent;
  transition: color .2s;
}
input[type="checkbox"]:checked + label span.checkbox::after {
  color: #62AFFF;
}

La seule différence est que nous utilisons une icône de la famille FontAwesome comme notre pseudo-élément ::after. Par défaut, il est transparent, mais lorsque la case est cochée, l'icône devient bleue.

Dérogation

Si vous souhaitez utiliser une icône FontAwesome dans votre pseudo-élément, vous devez inclure son code dans la propriété content et spécifier la propriété font-family en tant que FontAwesome. Par exemple :

{
content: '\f00c';
font-family: 'FontAwesome';
}

Le code f00c est précédé d'une barre oblique inverse, qui est nécessaire pour échapper le caractère unicode. L'Unicode peut être trouvé sur la page de l'icône choisie :

Résultat final

C'est tout. Nous avons maintenant créé des cases à cocher et des boutons radio entièrement fonctionnels et magnifiques, que vous pouvez modifier et utiliser pour vos propres projets. Vous pouvez voir le code source complet dans la démonstration CodePen :

Regardez le Pen Boutons radio et cases à cocher 2 par Matthew Cain (@matthewcain) sur CodePen.

Conclusion

Si vous trouvez ce tutoriel utile, ou si vous avez des questions, n'hésitez pas à nous en faire part dans la section commentaires ci-dessous. Merci !

Articles à lire

20 modèles HTML5 adaptatifs gratuits pour mai 2020

Mise à jour: Meilleurs outils d’animation HTML5 gratuits

Galerie de photos pour votre site Web HTML5 – Tutoriels jQuery et CSS3