Garder un bouton CSS enfoncé

Bonjour
Je suis actuellement en train de créer des boutons . Je leur ai donné une apparence au survol avec :hover ainsi qu'au clic avec :active . Cependant je souhaiterai qu'ils restent enfoncés avec l'apparence de :active apres l'avoir sélectionner . Il s'agit des boutons avec la classe "choix"

Je vous joins mon code

            <fieldset class="field">  
             <label for"alarme_intrusion"> Alarme intrusion 
              <input  type="radio"class="choix" name="choix" value="" /> </label> 
              <label for"chauffage"> Chauffage 
              <input  type="radio" class="choix"name="choix" value="" /> </label> 
              <label for"electricite"> Electricité 
              <input  type="radio" class="choix"name="choix" value="" /> </label> 
            </fieldset>
            <fieldset class="field">  
              <label for"alarme_incendie"> Alarme incendie   
              <input  type="radio" class="choix" name="choix" value=""/> </label> 
              <label for"informatique"> Informatique 
              <input  type="radio" class="choix"name="choix" value="" /> </label> 
            </fieldset>
            <fieldset class="field">
              <label for"eau"> Eau 
              <input  type="radio" class="choix"name="choix" value="" /> </label> 
              <label for"peinture"> Peinture 
              <input  type="radio" class="choix"name="choix" value="" />  </label> 
            </fieldset>
            <fieldset class="field">    
              <label for"serrurier"> Serrurier 
              <input  type="radio" class="choix"name="choix" value="" /> </label> 
              <label for"electroménager"> Electroménager 
              <input  type="radio" class="choix"name="choix" value="" /> </label> 
           </fieldset>
         

            <button id="submit" class="button">Modifier</button> 
            <button id="submit" class="button"> Annuler</button> 
      </form>
      </fieldset>   
            <div class="clear"> </div> 
            </div> 
            </div>

label
{
background:#0D4667;
padding: 5px;
display:block;
border:solid #0D4667;
margin : 10px;
font-weight: bold;
}

label.choix {
display:inline;
margin-right:50px;
font-family:Arial, Helvetica, Sans-Serif;
}

label:hover{
background-color: #35779d;
border-color: #3072b3;
}

label:active{
box-shadow: 1px 1px 10px black inset, 0 1px 0 rgba( 255, 255, 255, 0.4);
}


input[type=radio]{
float: left;
visibility:hidden;
display:none;
}


.field{
float:left;
margin:20px;
}

Salut, à mon avis tu va devoir gérer cela en javascript...

malheureusement je ne connais rien en Java Script

c'est ce que je me disais..

tu peux prendre exemple

Il suffit de détecter les events click sur les labels, et appliquer une class 'active' sur celles ci si l'event est lancé.
Modifié par JENCAL (31 Mar 2016 - 10:48)

merci beaucoup, je vais prendre exemple. Il faut que je me mette vraiment au JS sa me parait indispensable

autre petite question: comment faire pour pouvoir en sélectionner uniquement un seul et pas plusieurs ?

J'ai dit de la m****
Modifié par JENCAL (31 Mar 2016 - 11:13)

pardon ?

j'ai juste "edit" mon précédent message parce que c'était faux

ok je dois mettre quoi du coup pour en selectionner uniquement un seul ?

tu dois boucler sur tout les label pour vider leur className "active", puis cibler le currentTarget du paramètre "currentLabel" et appliquer la className active.

Bonjour !

Si j'ai bien compris, vous voulez faire jouer au "label" le rôle de bouton radio... (au passage, display : none est suffisant, ce n'est pas la peine de mettre visibility : hidden aussi).

Ce que je ne comprends pas, c'est comment vous allez utiliser le formulaire, si aucun bouton radio n'est sélectionné... (ils ont disparu avec display : none)

voila et Zelena à raison, ne pas mettre display none... sinon pas de radio lors du submit.
Modifié par JENCAL (31 Mar 2016 - 11:55)

bonjour Zelena oui c'est effectivement sa que je veux faire
Oui je suis bête je n'y avais pas pensé du coup j'ai retiré le display:none

merci également de ton aide JENCAL