Comment modifier en CSS une balise quand on sélectionne une option dans la balise select ?
Salut à tous.
J'ai une page contenant plein de boutons qui sont tous dans un formulaire.
Comme il y en a un peu trop, j'ai décidé d'ajouter une balise select afin d'afficher ceux du thème (firmware) et non tous les boutons.
Le thème est définie par la balise "<div>".
Pour l'instant, celle balise "<div>" n'englobe pas toutes les subdivisions du thèmes.
J'aimerai une solution sans JavaScript, si cela est possible.
Par exemple :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <select>
<option value="1">Fimware 4</option>
<option value="2">Fimware 3</option>
<option value="3">Fimware 2</option>
<option value="4">Fimware 1</option>
</select>
<form action="/Ex_27/PHP/methode.php" method="post">
<div>backup3g</div>
<button type="submit" name="val" value="02011">forceDataLink = on</button>
<button type="submit" name="val" value="02012">forceDataLink = off</button>
<button type="submit" name="val" value="02013">forceDataLink = auto</button>
<button type="submit" name="val" value="02021">forceVoipLink = on</button>
<button type="submit" name="val" value="02022">forceVoipLink = off</button>
<button type="submit" name="val" value="02030">getPinCode</button>
<button type="submit" name="val" value="02040">setPinCode = 1234</button>
<div>ddns</div>
<button type="submit" name="val" value="03010">disable</button>
<button type="submit" name="val" value="03020">enable</button>
<button type="submit" name="val" value="03030">forceUpdate</button>
<button type="submit" name="val" value="03040">getInfo</button>
<button type="submit" name="val" value="03050">setService</button>
</form> |
Le document html est en cours de finalisation. Ce que je vous donne correspond à l'affichage d'un extrait de tous mes boutons.
S'il y a des points à améliorer, je suis preneur.
En ce qui concerne la feuille de style :
Code:
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
| /*-----------------------*/
/* Sept colonnes */
/*-----------------------*/
form {
column-count : 7;
column-gap : 0px;
column-rule : 1px solid black;
text-align : center;
height : 100%;
}
/*--------------------*/
/* Séparateur */
/*--------------------*/
div {
display : inline-block;
margin : 10px 0px 0px 0px;
padding : 5px 0px;
width : 170px;
background-color : pink;
border : 1px solid pink;
border-radius : 25px;
}
/*-----------------*/
/* Boutons */
/*-----------------*/
button {
display : inline-block;
margin : 10px 0px 0px 0px;
padding : 5px 0px;
width : 170px;
background-color : dodgerblue;
border : 1px solid dodgerblue;
border-radius : 25px;
cursor : pointer
}
#a {
background-color : red;
} |
Ce document HTML est pour mon propre usage et n'a pas vocation a être mis sur la toile.
Ce que j'aimerai obtenir, devrait correspondre à l'affichage des thèmes suivants :
--> firmware 1 : --> thème 1
--> firmware 2 : --> thème 1+2
--> firmware 3 : --> thème 1+2+3
--> firmware 4 : --> thème 1+2+3+4
Merci.
@+
