Bouton Rond

Résolu

Jordi.D Messages postés 51 Date d'inscription Statut Membre Dernière intervention -
jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention - 5 févr. 2019 à 21:09

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

Afficher la suite

A voir également:

Bouton Rond
Supprimer rond bleu whatsapp - Guide
Bouton reinitialisation pc - Guide
Bouton allumer rond ou trait - Forum Word
Diagnostic bouton photo - Accueil - Outils
Rond violet snap - Forum Snapchat

3 réponses

Réponse 1 / 3

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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

Jordi.D Messages postés 51 Date d'inscription Statut Membre Dernière intervention

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é"

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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";

Jordi.D Messages postés 51 Date d'inscription Statut Membre Dernière intervention

<script language="javascript"> 
function ch() 
{ 
document.maform.monbouton.style.background = '#FF0000'; 
} 
</script>

Un truc comme ca ?

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752 > Jordi.D Messages postés 51 Date d'inscription Statut Membre Dernière intervention

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'; 
}

Jordi.D Messages postés 51 Date d'inscription Statut Membre Dernière intervention

Merci beaucoup mais quand je reclique dessus je voudrais qu'il redeviennent a la couleur d'origine je dois mettre une fonction else ?

Réponse 2 / 3

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

Mais sinon.. ça ne serait pas des switch que ton tuteur veut ???
https://www.w3schools.com/howto/howto_css_switch.asp

Jordi.D Messages postés 51 Date d'inscription Statut Membre Dernière intervention

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

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752 > Jordi.D Messages postés 51 Date d'inscription Statut Membre Dernière intervention

Dans ce cas, il te suffit de mettre le bouton par défaut à vert.
ça se fait en CSS...
https://www.w3schools.com/css/css3_buttons.asp

ou au pire, via l'attribut "STYLE"
https://www.w3schools.com/tags/att_global_style.asp

Et pour le choix des couleurs...
https://htmlcolorcodes.com/fr/

Réponse 3 / 3

tuxboy Messages postés 995 Date d'inscription Statut Membre Dernière intervention 190

Bonsoir,

Tu trouveras une solution ici :
https://www.w3schools.com/tags/att_option_value.asp

Jordi.D Messages postés 51 Date d'inscription Statut Membre Dernière intervention

Bonsoir, Vous savez comment mettre une couleur par défaut

Discussions similaires

Où est la touche SHIFT sur mon clavier d'ordi ?

Bouton ON OFF, O ou I ?

Quel est la touche shift sur le clavier

Pourquoi cercle violet sur snapchat

Cercle violet autour du bitmoji

Votre réponse

Discussions similaires