Trucsweb.com

Trucsweb.com

CSS

Pure CSS3

RDFFav

Élégante boite à cocher «checkbox» et bouton «radio» en pure CSS

Voilà un tutoriel très simple. Simple, mais combien utile ! Quel site n’a pas de formulaire et quel formulaire n’a pas de boite à cocher ?checkbox, boite à cocher, radio, ::before, ::after, label, form, formulaire, focus, checked, personnaliséÉlégante boite à cocher «checkbox» et bouton «radio» en pure CSS

Pierre Cardin

Voilà un tutoriel très simple. Simple, mais combien utile ! Quel site n’a pas de formulaire et quel formulaire n’a pas de boite à cocher ? On connait tous le truc qui utilise l’élément « checkbox » pour garder en mémoire une valeur booléenne, et ce sans aucun langage script, en pure CSS. C’est exactement la même technique pour personnaliser ou normaliser, sur toutes les plateformes et navigateurs, la boite à cocher et le bouton radio.

On commence par retirer de la page l’élément par défaut, plutôt laid et surtout différent selon le navigateur. Et on utilise ensuite le « label » avec ses caractéristiques « focus » et « checked » pour construire de toute pièce le nouvel élément à l’aide des sélecteurs « before » et « after ».

Et voilà, un des principaux problèmes visuels de réglés en quelques lignes de CSS sans aucune ligne de JavaScript ni autre dépendance.

La base

La première chose à faire c’est de normaliser le CSS en combinant le « padding » et la bordure avec les dimensions de l’élément (width/height), le fameux « border-box ». Noter que cette étape est inutile si votre code dépend d’un cadriciel comme Bootstrap, qui le fait déjà par défaut.

*, *::before, *::after {
  box-sizing: border-box;
}

Une boite à cocher fonctionne avec une étiquette, le label, qui permet de faire basculer la boite à cocher entre son état coché et non coché.

<input id="maMoiteAcocher" type="checkbox" />
<label for="maMoiteAcocher">Ma boite à cocher</label>
Résultat

Pour m’assurer de ne pas altérer de facto toutes les boites à cocher de la page, je donne un mon de classe :

<input class="cPerso" id="maMoiteAcocher" type="checkbox" />
<label class="cEtiquette" for="maMoiteAcocher">Ma boite à cocher</label>

Donc la première étape consiste à retirer l’élément <input> de la page. On pourrait simplement le rendre invisible avec display: none mais certains navigateurs risquerait de l’ignorer comme les lecteurs d’écran ou encore la navigation par tabulation au clavier. En changeant la position, c’est-à-dire en positionnant l’élément à l’extérieur de l’écran (de la page visible), l’élément <input> demeure dans le flux du document sans être visible.

/* Retrait des boite à cocher et des boutons radio */
input.cPerso[type="checkbox"], input.cPerso[type="radio"] {
  position: absolute;
  left: -9999px;
}
Tout est prêt pour personnalisation

Tout d’abord styliser l’étiquette. Essentiellement lui donner une position « relative » pour permettre un positionnement « absolu » de ses enfants (before et after). Ajuster le curseur et appliquer une marge à gauche pour permettre l’affichage du carré de la boite à cocher ou du rond du bouton radio.

/* Étiquette */
.cEtiquette {
  display: block;
  position: relative;
  margin: 10px 0;
  padding-left: 35px;
  cursor: pointer;
}

Ensuite, donner une position absolue aux ::before et ::after de l’étiquette :

/* Positionner l'imitation checkbox et radio */
.cEtiquette::before, .cEtiquette::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
}

Créer la nouvelle boite à cocher et le nouveau bouton radio :

/* Rond du radio */
input.cPerso[type="radio"] + .cEtiquette::before,
input.cPerso[type="radio"] + .cEtiquette::after {
  border-radius: 50%;
}

L’idée est de cibler le premier (+) ::before et ::after du bouton radio « cPerso » et d’utiliser la bordure pour dessiner l’élément (que l’on verra dans le prochain bout de code). border-radius: 50%; permets à cette bordure de créer un cercle parfait pour le bouton radio.

Et de donner une dimension, par exemple 20 x 20 pixels et une bordure (2 pixels) à l’élément. Noter que c’est ici que l’on retrouve la couleur par défaut (sans être coché).

/* Dimension et bordure du checkbox et radio */
.cEtiquette::before {
  display: block;
  width: 20px;
  height: 20px;
  border: 2px solid #f5f5f5;
}

Puis ajouter le milieu (rond ou carré) mais sans l’afficher pour l’instant (display: none;). C’est ici que l’on détermine la couleur du milieu :

/* Milieu du checkbox et radio une fois coché */
.cEtiquette::after {
  display: none;
  width: 12px;
  height: 12px;
  margin: 4px;
  background-color: #c6c3bd;
}
La « Programmation »

Le CSS3 permet carrément de la programmation. Bon ce n’est pas tout à fait vrais, mais c’est tout comme et d’ailleurs c’est précisément ici que l’on se passe de JavaScript. Le secret, les pseudo-classe focus et checked.

Premièrement, changer la couleur de la bordure une fois le « focus » sur l’élément :

/* Change la couleur de la bordure en focus */
input.cPerso:focus + .cEtiquette::before {
  border-color: #c6c3bd;
}

Et enfin, affichez le milieu caché et défini plus haut :

/* Affichage du milieu du checkbox et radio une fois cochés */
input.cPerso:checked + .cEtiquette::after {
  display: block;
}

C’est tout !! Deux lignes de CSS pour obtenir l’effet tant recherché.

Code complet
<style>
*, *::before, *::after {
  box-sizing: border-box;
}

input.cPerso[type="checkbox"], input.cPerso[type="radio"] {
  position: absolute;
  left: -9999px;
}

.cEtiquette {
  display: block;
  position: relative;
  margin: 10px 0;
  padding-left: 35px;
  cursor: pointer;
}

.cEtiquette::before, .cEtiquette::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
}

input.cPerso[type="radio"] + .cEtiquette::before,
input.cPerso[type="radio"] + .cEtiquette::after {
  border-radius: 50%;
}

.cEtiquette::before {
  display: block;
  width: 20px;
  height: 20px;
  border: 2px solid #f5f5f5;  
}

.cEtiquette::after {
  display: none;
  width: 12px;
  height: 12px;
  margin: 4px;
  background-color: #c6c3bd;
}

input.cPerso:focus + .cEtiquette::before {
  border-color: #c6c3bd;
}

input.cPerso:checked + .cEtiquette::after {
  display: block;
}
</style>

<body>
  <label>Comment trouvez-vous les Trucsweb?</label>
     
  <input class="cPerso" id="oAppreciation0" name="oAppreciation" type="radio" />
  <label for="oAppreciation0" class="cEtiquette">Pas fort</label>
      
  <input class="cPerso" id="oAppreciation1" name="oAppreciation" type="radio" />
  <label for="oAppreciation1" class="cEtiquette">Moyen</label>

  <input class="cPerso" id="oAppreciation2" name="oAppreciation" type="radio" />
  <label for="oAppreciation2" class="cEtiquette">Très bien</label>

  <input class="cPerso" id="oAppreciation3" name="oAppreciation" type="radio" />
  <label for="oAppreciation3" class="cEtiquette">Excellent</label>
      
  <label>Vous aimez le :</label>

  <input class="cPerso" id="oLangage0" name="oLangage0" type="checkbox" />
  <label for="oLangage0" class="cEtiquette">JavaScript</label>
      
  <input class="cPerso" id="oLangage1" name="oLangage1" type="checkbox" />
  <label for="oLangage1" class="cEtiquette">CSS3</label>
      
  <input class="cPerso" id="oLangage2" name="oLangage2" type="checkbox" />
  <label for="oLangage2" class="cEtiquette">PHP</label>
      
  <input class="cPerso" id="oLangage3" name="oLangage3" type="checkbox" />
  <label for="oLangage3" class="cEtiquette">ASP</label>

</body>
Résultat

À lire aussi

Sur le même sujet : « CSS - Styliser la boite à cocher »

Références
, Analyste programmeurConception oznogco multimédia (http://oznogco.com), Trucsweb
Dernière mise à jour :

Commentaires

    Ajouter un commentaire
    Votre adresse de courriel ne sera pas publiée. * L'astérisque indique les champs obligatoires.
    Votre évaluation du tutoriel

    9/10 sur 1 revues.
           Visites : 10197 - Pages vues : 10349
    X

    Trucsweb.com Connexion

    Connexion

    X

    Trucsweb.com Mot de passe perdu

    Connexion

    X

    Trucsweb.com Conditions générales

    Conditions

    Responsabilité

    La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

    Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

    Droit applicable et juridiction compétente

    Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

    X

    Trucsweb.com Trucsweb

    X

    Trucsweb.com Glossaire

    X

    Trucsweb.com Trucsweb

    X

    Trucsweb.com Trucsweb

    Conditions

    Aucun message!

    Merci.

    X
    Aucun message!
    X

    Trucsweb.com Créer un compte

    Créer un compte

    .
    @