Menu d’options à cocher

Ce menu permet de sélectionner plusieurs options sur une grille, notamment pour la personnalisation de produits ou de services. En arrière-plan, le composant utilise des cases à cocher en HTML standard ce qui en facilite la gestion.

Le code HTML consiste en une série de cases à cocher (<input>) et d’étiquettes (<label>). Chaque case à cocher doit recevoir un id unique. L’attribut for de l’étiquette correspondant réfère à cet id. Ainsi, la case à cocher changera d’état lors du clic sur l’étiquette correspondante.

<div class="options">
  <input type="checkbox" id="repas-chaud">
  <label for="repas-chaud">
    Repas chaud
  </label>
  <input type="checkbox" id="ecouteurs">
  <label for="ecouteurs">
    Écouteurs
  </label>
  <input type="checkbox" id="tablette">
  <label for="tablette">
    Tablette de divertissement
  </label>
  <input type="checkbox" id="aperitif">
  <label for="aperitif">
    Apéritif
  </label>
  <input type="checkbox" id="kit-confort">
  <label for="kit-confort">
    Kit Confort
  </label>
  <input type="checkbox" id="chiot">
  <label for="chiot">
    Chiot de compagnie
  </label>
  <input type="checkbox" id="bouteille-vin">
  <label for="bouteille-vin">
    Bouteille de vin
  </label>
  <input type="checkbox" id="kit-tricot">
  <label for="kit-tricot">
    Kit de tricot
  </label>
  <input type="checkbox" id="bouteille-eau">
  <label for="bouteille-eau">
    Bouteille d'eau
  </label>
</div>

Le code CSS stylise les étiquettes et les positionne sur une grille. Les cases à cocher sont masquées. Un sélecteur d’adjacence + applique un style particulier aux étiquettes correspondant aux options activées. Le style comporte une case à cocher factice, générée en CSS.

Le CSS incorpore des variables CSS pour simplifier la personnalisation. Vous pouvez également « aplatir » les variables en copiant-collant les valeurs aux différents endroits de votre code.

:root {
  --accent-r: 35;
  --accent-g: 106;
  --accent-b: 211;

  --base-r: 96;
  --base-g: 96;
  --base-b: 96;

  --semi: 0.5;

  --accent: rgb(var(--accent-r), var(--accent-g), var(--accent-b));
  --accent-semi: rgba(
    var(--accent-r),
    var(--accent-g),
    var(--accent-b),
    var(--semi)
  );

  --base: rgb(var(--base-r), var(--base-g), var(--base-b));
  --base-semi: rgba(var(--base-r), var(--base-g), var(--base-b), var(--semi));

  --transition: all 0.25s linear;
}

.options {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.5rem;
}

.options > label {
  --couleur-bordure: var(--base);
  --couleur-ombre: transparent;

  display: block;
  border-radius: 0.5rem;
  padding: 0.5rem;
  min-height: 5rem;
  cursor: pointer;

  background-color: #ffffff;
  border: 2px solid var(--couleur-bordure);
  box-shadow: 0rem 0rem 0rem 0.15rem var(--couleur-ombre);
  transition: var(--transition);
}

.options > label:hover {
  --couleur-bordure: var(--base);
  --couleur-ombre: var(--base-semi);
}

.options > label::before { /* crée case à cocher factice dans l'étiquette */
  content: " ";

  display: block;
  width: 1rem;
  height: 1rem;
  margin-bottom: 0.05rem;

  border-radius: 50%;
  border: 2px solid var(--base);
  transition: var(--transition);
}

.options > input[type="checkbox"] {
  width: 0;
  height: 0;
  position: absolute;
}

.options > input[type="checkbox"]:checked + label { /* étiquettes adjacentes aux cases cochées */
  --couleur-bordure: var(--accent);
  --couleur-ombre: var(--accent-semi);
}

.options > input[type="checkbox"]:checked + label::before {
  background-color: var(--accent);
  box-shadow: inset 0rem 0rem 0rem 0.15rem rgba(255, 255, 255, 0.8);
}


Démonstration

See the Pen by Jean-Luc Montreuil (@cssactif) on CodePen.

Laisser un commentaire

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