[CSS]Notation par étoiles

NoSmoking

Réalisation d'un système de notation par étoiles sans JavaScript.

Rendu

Donnez une note

Requête :

La partie sélection de la note est réalisée uniquement en CSS/HTML et n'a pas besoin de JavaScript pour fonctionner. L'exemple reste accessible au clavier.

La soumission au serveur de la note peut se faire soit par envoi traditionnel du formulaire soit par Ajax via la méthode fetch().

Structure HTML

La structure repose sur l'imbrication des éléments « étoile » les uns dans les autres ce qui permet d'utiliser le sélecteur d'adjacence indirecte ~ (tilde) pour appliquer le style lors du survol et de la sélection.

La structure peut paraître un peu alambiquée mais est tout à fait conforme. 

<form class="box" action="save_rating.php" method="post">
  <fieldset>
    <legend>Donnez une note</legend>
    <input type="hidden" name="id" value="sessionID">
    <p class="wrapper-rating">
      <input name="note" id="note_0" value="-1" type="radio" checked autofocus>
      <span class="star">
        <input name="note" id="note_1" value="1" type="radio">
        <label for="note_1" title="Très mauvaise"><svg><use href="#star"></use></svg></label>
        <span class="star">
          <input name="note" id="note_2" value="2" type="radio">
          <label for="note_2" title="Médiocre"><svg><use href="#star"></use></svg></label>
          <span class="star">
            <input name="note" id="note_3" value="3" type="radio">
            <label for="note_3" title="Moyenne"><svg><use href="#star"></use></svg></label>
            <span class="star">
              <input name="note" id="note_4" value="4" type="radio">
              <label for="note_4" title="Bonne"><svg><use href="#star"></use></svg></label>
              <span class="star">
                <input name="note" id="note_5" value="5" type="radio">
                <label for="note_5" title="Excellente"><svg><use href="#star"></use></svg></label>
              </span>
            </span>
          </span>
        </span>
      </span>
    </p>
    <p>
      <button type="reset" title="Effacer la note en cours">Effacer</button>
      <button title="Envoyer votre note">Voter</button>
    </p>
  </fieldset>
</form>

Le dessin des étoiles est réalisé grâce à un élément SVG <symbol>, . 

<symbol id="star" viewBox="-2 -2 24 24" xmlns="http://www.w3.org/2000/svg">
  <path d="m10 15-5.9 3 1.1-6.5L.5 7 7 6 10 0l3 6 6.5 1-4.7 4.5 1 6.6z"/>
</symbol>

CSS appliqué