Bouton Rond

Résolu/Fermé

Jordi.D Messages postés 51 Date d'inscription vendredi 11 janvier 2019 Statut Membre Dernière intervention 8 février 2019 - Modifié le 31 janv. 2019 à 14:46
jordane45 Messages postés 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 - 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

A voir également:

Bouton Rond
Réinitialiser chromecast sans bouton - Guide
Video rond whatsapp - Accueil - Messagerie instantanée
Numero rond ✓ - Forum Word
Bouton reinitialisation pc - Guide
Rond gris messenger bloqué - Forum Facebook Messenger

3 réponses

Réponse 1 / 3

jordane45 Messages postés 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705
31 janv. 2019 à 19:32

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 vendredi 11 janvier 2019 Statut Membre Dernière intervention 8 février 2019
31 janv. 2019 à 20:35

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 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705
31 janv. 2019 à 22:58

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 vendredi 11 janvier 2019 Statut Membre Dernière intervention 8 février 2019
1 févr. 2019 à 13:17

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

Un truc comme ca ?

jordane45 Messages postés 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705 > Jordi.D Messages postés 51 Date d'inscription vendredi 11 janvier 2019 Statut Membre Dernière intervention 8 février 2019
1 févr. 2019 à 21:51

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 vendredi 11 janvier 2019 Statut Membre Dernière intervention 8 février 2019
5 févr. 2019 à 13:32

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 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705
5 févr. 2019 à 20:50

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 vendredi 11 janvier 2019 Statut Membre Dernière intervention 8 février 2019
5 févr. 2019 à 20:58

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

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 lundi 23 juillet 2012 Statut Membre Dernière intervention 28 mai 2019 190
5 févr. 2019 à 19:29

Bonsoir,

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

Jordi.D Messages postés 51 Date d'inscription vendredi 11 janvier 2019 Statut Membre Dernière intervention 8 février 2019
5 févr. 2019 à 20:47

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

Discussions similaires

Snapchat cercle violet bitmoji

Quel est la touche shift sur le clavier

Rond barré, je n'arrive pas à l'élever

ou est la touche shift sur un clavier

Messenger : que veut dire le rond gris coche blanche ?