Avoir plusieurs boutons checked différents

Sujet résolu

11 octobre 2021 à 16:31:31

Bonjour,

Je cherche à obtenir 3 boutons, dont la couleur de fond est différente. En effet, étant faible en checkbox, j'ai trouvé un code pour créer un bouton coulissant et je l'ai modifié à mon gré pour le mettre à la taille, au design et à la couleur que je veux. Le souci, c'est que je voudrais que le 1er bouton validé ait un fond vert, comme actuellement, mais que le 2e ait un fond orange, et le 3e, un fond rouge.

J'ai essayé plusieurs combinaisons, sans succès.

Pourriez-vous m'aider SVP ?

Merci d'avance,

Voici mon code HTML :

<!DOCTYPE html>
<html>
    <head> <!-- En-tête de la page -->
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <title>test</title>
    </head>

    <body>
   
		<label class="switch">
  		<input type="checkbox" id="test01">
  		<div class="slider round"></div>
		</label>

		<label class="switch">
  		<input type="checkbox" id="test02">
  		<div class="slider round"></div>
		</label>

		<label class="switch">
  		<input type="checkbox" id="test03">
  		<div class="slider round"></div>
		</label>

    </body>
</html>

et voici le CSS :

.switch{ /* boite autour du curseur */
  position: relative;
  display: inline-block;
  margin-top: 0px; /* Distance avec le haut de la cellule */
  width: 90px; /* Longueur de l'interrupteur */
  height: 41px; /* Hauteur de l'interrupteur */
}

.switch input {display:none;} /* Masque le checkbox par défaut */


.slider { /* curseur */
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: silver ;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before { /* Dimension du bouton */
  position: absolute;
  content: "";
  height: 35px;
  width: 35px;
  left: 4px;
  bottom: 3px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider { /*Couleur de fond lorsque validé*/
  background-color: #56bf2e;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(47px); /* Ces 3 valeurs modifient la longueur de course du bouton */
  -ms-transform: translateX(47px);
  transform: translateX(47px);
}


.slider.round { /* Bords du bouton */
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

AbcAbc6

11 octobre 2021 à 16:52:58

Bonjour, passez votre code HTML au validateur pour voir et corriger vos erreurs => https://validator.w3.org

Vous ne pouvez pas avoir un élément <div> dans un label qu n’accepte que du contenu phrasé. Remplacer les <div> par <span> si vous ne voulez pas changer tout le HTML.

Pour votre problème il suffit d'ajouté une class avec la couleur désirée. Exemple:

            input:checked + .slider.orange{ /*Couleur de fond lorsque validé*/
                background-color: orange;
            }

ArmelWatel

11 octobre 2021 à 18:24:29

Bonjour AbcAbc6,

En effet, j'oublie tout le temps d'utiliser validator.w3.org, vous faites bien de me le rappeler, il faut vraiment que je me le mette en favori.

Merci aussi pour votre solution, elle marche parfaitement.

Merci pour tout, vous êtes très efficace.

Cordialement,

-
Edité par ArmelWatel 11 octobre 2021 à 18:24:46