Bouton Rond

Résolu
Jordi.D Messages postés 60 Statut Membre -  
jordane45 Messages postés 30426 Date d'inscription   Statut Modérateur Dernière intervention   -
Bonjour , mon tuteur n'est pas satisfait en effet il voudrait qu'a la place des chekbox des bouton rond lorsque l'on clique sur celui si il garde la couleur mais je ne sais pas comment faire pouvez vous m'aide svp.
J'ai essaie plusieurs fois avec css mais rien na faire 
<!DOCTYPE html>

<html>
<head>
 <meta charset="utf-8">
 <title>Test Problème caisses</title>
</head>

<body style="background-color:#FFFFFF;">
<FORM name="form1" method="post" action="recup.php?<?PHP echo SID; ?>">

<p></p>
<p style="text-align: center;"><strong>VERIFICATION MATERIEL LIGNE DE CAISSES</strong></p>
<p style="text-align: center;"></p>
<table style="width: 100%; height: 18px; margin-right: auto; margin-left: auto; border-collapse: collapse;" border="1">
<tbody>
<tr style="height: 17px;">
<td style="width: 7%; height: 8px; text-align: center;" rowspan="2">Caisse<strong><span style="text-align: left; color: #000000; text-transform: none; text-indent: 0px; letter-spacing: normal; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 10px; font-style: normal; font-variant: normal; text-decoration: none; word-spacing: 0px; display: inline !important; white-space: normal; cursor: text; orphans: 2; float: none; -webkit-text-stroke-width: 0px; background-color: transparent;"><br /></span></strong></td>
<td style="width: 25%; height: 21px; text-align: center;" colspan="7"><strong><span style="text-align: left; color: #000000; text-transform: none; text-indent: 0px; letter-spacing: normal; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 14px; font-style: normal; font-variant: normal; text-decoration: none; word-spacing: 0px; display: inline !important; white-space: normal; cursor: text; orphans: 2; float: none; -webkit-text-stroke-width: 0px; background-color: transparent;">Service Technique</span></strong></td>
<td style="width: 25%; height: 21px; text-align: center;" colspan="4"><b>Service Informatique</b></td>
<td style="width: 25%; height: 21px; text-align: center;"><b>commentaire<br /></b></td>
</tr>
<tr style="height: 17px;">
<td style="width: 6.19%; height: 17px; text-align: center;">Tapis</td>
<td style="width: 6.19%; height: 17px; text-align: center;">Embout</td>
<td style="width: 6.19%; height: 17px; text-align: center;">Luminaire</td>
<td style="width: 6.19%; height: 17px; text-align: center;">Ecran</td>
<td style="width: 6.19%; height: 17px; text-align: center;">Battant</td>
<td style="width: 6.19%; height: 17px; text-align: center;">Mirroir</td>
<td style="width: 6.19%; height: 17px; text-align: center;">Tel </td>
<td style="width: 6.19%; height: 17px; text-align: center;">TPE</td>
<td style="width: 6.19%; height: 17px; text-align: center;">Imprimante</td>
<td style="width: 6.19%; height: 17px; text-align: center;">Scanner</td>
<td style="width: 6.19%; height: 17px; text-align: center;">Caisse(ordi)</td>

</tr>
<tr>
<td style="width: 7%; text-align: center;">1</td>
<td style="width: 3.09%; text-align: center;">
<div>
<button class="button-red">Rouge</button>
</td>
<td style="width: 5.19%; text-align: center;">
<div
<div style="text-align: center;">
<input name="a[]" id="2" type="checkbox"  /> <label for="2">HS</label></div>
</div>
</td>
<td style="width:5.19%; text-align: center;">
<div>
<div><input name="a[]" id="3"type="checkbox"/><labelfor="3">HS</label></div>
</div>
</td>
<td style="width: 5.19%%; text-align: center;">
<div
<div><input name="a[]" id="4" type="checkbox"  /> <label for="4">HS</label></div>
</div>
</td>
<td style="width: 5.19%%; text-align: center;">
<div>
<div><input name="a[]" id="5" type="checkbox"  /> <label for="5">HS</label></div>
</div>
</td>
<td style="width: 5.19%; text-align: center;">
<div>
<div><input name="a[]" id="6" type="checkbox"  /> <label for="6">HS</label></div>
</div>
</td>
<td style="width: 5.19%; text-align: center;">
<div>
<div><input name="a[]" id="7" type="checkbox"  /> <label for="7">HS</label></div>
</div>
</td>
<td style="width:5.19%; text-align: center;">
<div>
<div><input name="a[]" id="8" type="checkbox"  /> <label for="8">HS</label></div>
</div>
</td>
<td style="width:5.19%; text-align: center;">
<div>
<div><input name="a[]" id="9" type="checkbox"  /> <label for="9">HS</label></div>
</div>
</td>
<td style="width:5.19%; text-align: center;">
<div>
<div><input name="a[]" id="10" type="checkbox"  /> <label for="10">HS</label></div>
</div>
</td>
<td style="width:5.19%; text-align: center;">
<div>
<div><input name="a[]" id="11" type="checkbox"  /> <label for="11">HS</label></div>
</div>
</td>
<td style="width: 43.33%;"><textarea name="nom" rows="3" cols="53"></textarea></td>
</tr>
</tbody>
</table>
<p></p>
<p></p>
<p></p>
<input type="button" value="Verification" accesskey="s">
</form>
</body>
</html>

voici mon code html

3 réponses

  1.
    jordane45 Messages postés 30426 Date d'inscription   Statut Modérateur Dernière intervention   4 830
     
    Bonjour,

    Un dessin ou de meilleurs explications sont nécessaires...
    qu'est ce que tu as voulu dire par

    a la place des chekbox des bouton rond lorsque l'on clique sur celui si il garde la couleur

    1
    1. Jordi.D Messages postés 60 Statut Membre
       
      Bonjour,
      Comme tu as pu le voir dans mon code j'ai des checkboxs je voudrais remplacer celle-ci par des <button> "rond" 
      <style>
.bouton18 {border-radius: 50% ;
	width:35px;
	height:35px;
	background-color: blue;
bputon18:active {
    background-color: red;
    outline: none; /* Pour enlever la bordure bleu */
}
.button5 {border-radius: 50%;}
</style>

      Comme ici mais je voudrais que lorsque l'on clique sur le bouton il devient rouge et reste rouge et si on reclique dessus il reprend sa couleur d'origine " J'espère que je me suis bien exprimé"
      0
    2. jordane45 Messages postés 30426 Date d'inscription   Statut Modérateur Dernière intervention   4 830
       
      Pour les arrondis .. c'est du css 
      border-radius: 20px; 
-moz-border-radius: 20px; 
-webkit-border-radius: 20px;


      pour le changement de couleur, il suffit, en javascript, de mettre un "onclick" sur tes boutons
      ce onclick lance une fonction que tu auras codé en JS
      cette fonction jouera sur le style background-color pour mettre la couleur que tu souhaites 
      tonbouton.style.backgroundColor = "red";
      0
    3. Jordi.D Messages postés 60 Statut Membre
        
      <script language="javascript"> 
function ch() 
{ 
document.maform.monbouton.style.background = '#FF0000'; 
} 
</script>

      Un truc comme ca ?
      0
    4. jordane45 Messages postés 30426 Date d'inscription   Statut Modérateur Dernière intervention   4 830 > Jordi.D Messages postés 60 Statut Membre
       
      Evite de selectionner les éléments à partir de son attribut "name"
      préfère utiliser la selection par son id 
      <input id="toto" name="peuimporte'" value="go" type="button" onclick="ch()">


      function ch() { 
  document.getElementById("toto").style.background = '#FF0000'; 
}
      0
    5. Jordi.D Messages postés 60 Statut Membre
       
      Merci beaucoup mais quand je reclique dessus je voudrais qu'il redeviennent a la couleur d'origine je dois mettre une fonction else ?
      0
  2. jordane45 Messages postés 30426 Date d'inscription   Statut Modérateur Dernière intervention   4 830
     
    Mais sinon.. ça ne serait pas des switch que ton tuteur veut ???
    https://www.w3schools.com/howto/howto_css_switch.asp

    1
    1. Jordi.D Messages postés 60 Statut Membre
       
      Non c'est bien des bouton, tous les boutons sont vert "par défaut" l'utilisateur clique sur le bouton il passe au rouge une fois fini l'utilisateur envoie par mail le tableau
      0

Discussions similaires

Bouton ON/OFF : O ou I, quel côté est allumé
Stargirlfr -
kaparzo23 -

12 réponses
Où est la touche SHIFT sur mon clavier d'ordi ?
joe! -
fernando-_ytb -

18 réponses
symbole arrêt marche
strumpfi -
Raymond PENTIER -

2 réponses
Arrêt/démarrage via Bouton ON/OFF de l'alim
kekliard -
baaabu -

15 réponses
Snapchat que veux dire le petit point vert
Anna_6260 -
Anna_6260 -

2 réponses