Plusieurs bouton avec le même style CSS

**charlieda** · 25/01/2022, 05h55

Bonjour à toutes et à tous,

J'ai trouvé un code css pour des boutons.

Voici le

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<section title=".roundedOneRedSAR">
     <!-- .roundedOne -->
         <div class="roundedOneRedSAR">
              <input type="checkbox" value="None" id="roundedOneRedSAR" name="check" />
              <label for="roundedOneRedSAR"></label>
         </div>
    <!-- end .roundedOne -->
</section>

Le code CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
.roundedOneSAR  {
  width: 28px;
  height: 28px;
  position: relative;
  margin: 20px auto;
  background: #fcfff4;
  background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
  border-radius: 50px;
  box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
}
.roundedOneSAR label {
  width: 20px;
  height: 20px;
  cursor: pointer;
  position: absolute;
  left: 4px;
  top: 4px;
  background: linear-gradient(to bottom, #222222 0%, #45484d 100%);
  border-radius: 50px;
  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px white;
}
.roundedOneSAR label:after {
  content: '';
  width: 16px;
  height: 16px;
  position: absolute;
  top: 2px;
  left: 2px;
  background: #27ae60;
  background: linear-gradient(to bottom, #27ae60 0%, #145b32 100%);
  opacity: 0;
  border-radius: 50px;
  box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
}
.roundedOneSAR label:hover::after {
  opacity: 0.3;
}
.roundedOneSAR input[type=checkbox] {
  visibility: hidden;
}
.roundedOneSAR  input[type=checkbox]:checked + label:after {
  opacity: 1;
}

Le souci est que j'ai une trentaine de bouton comme celui là.

Ils ont tous le même code CSS. La seule chose qui change est dans le HTML, l'ID.

Comment puis je faire pour grouper ce code css ?

J'ai essayé ceci mais cela ne fonctionne pas. L'affichage ne prend pas en compte le css quand je fais ceci

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.roundedOneSAR .roundedTwoSAR { 
......
}

Merci d'avance pour votre aide.

Je vous souhaite une bonne journée.

**Jacques Beauregard** · 25/01/2022, 10h34

Bonjour

,

Dans le code CSS que tu as posté, je ne vois que des sélecteurs de classes. L'ID HTML (qui change tout le temps dans ton cas) n'est jamais sélectionné dans ton CSS.
Par conséquent si tes 30 boutons HTML ont la même classe CSS ils auront tous le même style non avec le code CSS posté ? (ce code regroupe déjà tes 30 boutons en fait)

Cdlt.

**charlieda** · 25/01/2022, 11h55

Bonjour,

Je te remercie pour ta réponse mais j'ai essayé dans tous les sens et ça bloque. Soit le résultat n'est pas le bon (pas de bouton coloré quand je clique, soit rien ne se passe, soit en cliquant sur l'un, ça active l'autre)

Voici le code de base avec 2 boutons fonctionnels. Mais j'imagine pas dupliquer 30 fois le css pour la quasi même chose.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
 
.roundedOneSAR  {
  width: 28px;
  height: 28px;
  position: relative;
  margin: 20px auto;
  background: #fcfff4;
  background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
  border-radius: 50px;
  box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
}
.roundedOneSAR label {
  width: 20px;
  height: 20px;
  cursor: pointer;
  position: absolute;
  left: 4px;
  top: 4px;
  background: linear-gradient(to bottom, #222222 0%, #45484d 100%);
  border-radius: 50px;
  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px white;
}
.roundedOneSAR label:after {
  content: '';
  width: 16px;
  height: 16px;
  position: absolute;
  top: 2px;
  left: 2px;
  background: #27ae60;
  background: linear-gradient(to bottom, #27ae60 0%, #145b32 100%);
  opacity: 0;
  border-radius: 50px;
  box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
}
.roundedOneSAR label:hover::after {
  opacity: 0.3;
}
.roundedOneSAR input[type=checkbox] {
  visibility: hidden;
}
.roundedOneSAR  input[type=checkbox]:checked + label:after {
  opacity: 1;
}
 
.roundedOneHalf  {
    width: 28px;
    height: 28px;
    position: relative;
    margin: 20px auto;
    background: #fcfff4;
    background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    border-radius: 50px;
    box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
  }
  .roundedOneHalf label {
    width: 20px;
    height: 20px;
    cursor: pointer;
    position: absolute;
    left: 4px;
    top: 4px;
    background: linear-gradient(to bottom, #222222 0%, #45484d 100%);
    border-radius: 50px;
    box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px white;
  }
  .roundedOneHalf label:after {
    content: '';
    width: 16px;
    height: 16px;
    position: absolute;
    top: 2px;
    left: 2px;
    background: #27ae60;
    background: linear-gradient(to bottom, #27ae60 0%, #145b32 100%);
    opacity: 0;
    border-radius: 50px;
    box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
  }
  .roundedOneHalf label:hover::after {
    opacity: 0.3;
  }
  .roundedOneHalf input[type=checkbox] {
    visibility: hidden;
  }
  .roundedOneHalf  input[type=checkbox]:checked + label:after {
    opacity: 1;
  }
 
 
</style>
</head>
<body>
 
 
 
 
<div class="check_list">
    <div class="text-center">
        <table>
            <tr><th>SAR</th><th>Half</th></tr>
 
            <tr><td><section title=".roundedOneSAR">
                <!-- .roundedOne -->
                <div class="roundedOneSAR">
                  <input type="checkbox" value="None" id="roundedOneSAR" name="check" />
                  <label for="roundedOneSAR"></label>
                </div>
                <!-- end .roundedOne -->
              </section></td>
              <td><section title=".roundedOneHalf">
                <!-- .roundedOne -->
                <div class="roundedOneHalf">
                  <input type="checkbox" value="None" id="roundedOneHalf" name="check" />
                  <label for="roundedOneHalf"></label>
                </div>
                <!-- end .roundedOne -->
              </section></td>
             </tr>
 
        </table>
    </div>
</div>
 
</body>
</html>

Merci pour vos avis et aides.

Bonne journée

**Jacques Beauregard** · 25/01/2022, 14h14

Re,

A quoi te servent les ID HTML ?
si ça te sert pas : tu peux utiliser une seule classe css (on va dire : "roundedOneSAR") et tu crées tes 30 boutons en appelant "roundedOneSAR"

**charlieda** · 25/01/2022, 15h36

Re,

Merci pour tes réponses et ton aide.

Si j'enlève les ID, cela ne fonctionne pas.

J'avoue que je ne sais pas trop le pourquoi du comment, j'ai trouvé ce code sur codepen

Merci

**Jacques Beauregard** · 25/01/2022, 16h30

Re,

Concernant les id html je parlais utilisation au sens CSS. pas ailleurs (niveau JS ou HTML).
ça donne quoi si tous tes boutons ont la même classe ?

**charlieda** · 26/01/2022, 06h02

Re,

Pardon pour l'incompréhension.

Ca donne que un seul bouton réagit et change de couleur peu importe celui que je clique.

Merci pour ton temps

**Jacques Beauregard** · 26/01/2022, 11h42

Re,

Je t'ai fait un JSFiddle : https://jsfiddle.net/c8xfzv0a/

Dis moi si c'est ce que tu souhaitais.

(Pour info : l'ID html est utilisé pour ton label (for) et le click sur ton bouton (ça colorie en vert le bon bouton en gros)

Cdlt.

**charlieda** · 27/01/2022, 06h04

Re,

Je te remercie, c'est exactement cela.

Me reste à comprendre mon erreur. Je vais fouiller.

Un grand merci.

Bonne journée

Plusieurs bouton avec le même style CSS

CSS

Discussions similaires

Partager

Partager