Formulaire html css

**koala19100** · 08/02/2017, 22h57

bonjours,
je voudrais savoir votre avis sur ce code et et une capture pour voir ceux que ça donne:

Code html :

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
<fieldset>
  <legend>général</legend>
  <p class="icon-prenom" title="prénom">
    <label class="label-inscription" for="prenom">votre prénom : *</label>
    <input class="global-input" type="text" placeholder="Votre Prénom"  name="prenom" id="prenom" required />veuillez mettre votre prénom.
  </p>
  <div>
    <label class="label-inscription">loisir :</label>
    <span class="choix-liste choix-actif icon-select">choix de la liste</span>
    <span class="choix-membre">choix 1, choix 8</span>
    <div class="select-multiple-choix">
      <ol class="select-choix">
        <li>
          <input type="checkbox" name="Choix1" id="Choix1" />Choix 1
        </li>
        <li>
          <input type="checkbox" name="Choix2" id="Choix2" />Choix 2
        </li>
        <li>
          <input type="checkbox" name="Choix3" id="Choix3" />Choix 3
        </li>
        <li>
          <input type="checkbox" name="Choix4" id="Choix4" />Choix 4
        </li>
      </ol>
      <ol class="select-choix">
        <li>
          <input type="checkbox" name="Choix5" id="Choix5" />Choix 5
        </li>
        <li>
          <input type="checkbox" name="Choix6" id="Choix6" />Choix 6
        </li>
        <li>
          <input type="checkbox" name="Choix7" id="Choix7" />Choix 7
        </li>
        <li>
          <input type="checkbox" name="Choix8" id="Choix8" />Choix 8
        </li>
      </ol>
      <ol class="select-choix">
        <li>
          <input type="checkbox" name="Choix9" id="Choix9" />Choix 9
        </li>
        <li>
          <input type="checkbox" name="Choix10" id="Choix10" />Choix 10
        </li>
        <li>
          <input type="checkbox" name="Choix11" id="Choi11" /> Choix 11
        </li>
        <li>
          <input type="checkbox" name="Choix12" id="Choix12" />Choix 12
        </li>
      </ol>
    </div>
  </div>
  <div>
    <label class="label-inscription">pays :</label>
    <span class="select-normal">
      <span class="select-normal-choix icon-select">Choix dans la liste</span>
      <ol class="select-choix-liste">
        <li>France</li>
        <li>Belgigique</li>
        <li>Portugal</li>
      </ol>
    </span>
  </div>
</fieldset>

si ca vous dit voilà le css :

Code css :

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
/*********************************************************************************************************Début des formulaires***********************************************************************************************************************************/
 
fieldset {
  display: block;
  margin-bottom: 1em;
  position: relative;
  border: 1px solid #CCCCCC;
  padding: 0;
  padding-top: 4em;
}
 
legend {
  border-bottom: 1px solid #CCCCCC;
  width: 100%;
  position: absolute;
  top: -1px;
  left: -1px;
 /* hide the fieldset border */
  line-height: 3em;
 /* emulating padding-top/bottom */
  text-indent: 1em;
 /* emulating padding-left */
  %left: -8px;
  font-weight: 700;
  font-size: 1.3em;
} /* for IE7 */
 
fieldset p, fieldset div {
  padding: 1em;
  margin: 0;
  overflow: hidden;
  border-top: 1px solid #CCCCCC;
}
 
fieldset div:nth-child(2), fieldset p:nth-child(2) {
  border-top: 0;
}
/*********************************************************************************************************Fin des formulaires***********************************************************************************************************************************/
/*********************************************************************************************************Début des select**********************************************************************************************************************************/
 
.choix-liste {
  position: relative;
  float: left;
  list-style: none;
  padding: 0.3em;
  margin-right: 11em;
  border: 1px solid #CCCCCC;
  border-bottom: 0;
  cursor: pointer;
  background-color: #FFFFFF;
  color: #0D5995;
  z-index: 1;
  width: 20em;
}
 
.choix-liste, .choix-actif {
  border-bottom: none;
  font-weight: bold;
  z-index: 10;
  color: #CCCCCC;
}
 
.select-multiple-choix {
  clear: both;
  position: relative;
  border: #CCCCCC 1px solid;
  z-index: 5;
  top: -0.1em;
  top: -2px;
/*	  background-color:#7192a8;*/
  overflow: hidden;
  width: 45em;
}
 
.select-choix li {
  float: left;
  width: 10em;
}
 
.choix-membre {
  font-weight: 700;
}
 
.select-normal {
  border: #CCCCCC 1px solid;
  display: inline-block;
  padding: 0;
  width: 15em;
}
 
.select-normal-choix {
  border-bottom: 1px solid #CCCCCC;
  padding: 0.5em;
  display: block;
}
 
.select-choix-liste li {
  padding: 0.5em;
}
 
.select-choix-liste li:hover {
  background-color: #4F6888;
  padding: 0.5em;
}
 
.label-inscription {
  float: left;
  width: 20em;
}
 
 
/*********************************************************************************************************Fin des select************************************************************************************************************************************/

j'ai mis des li ol afin de compter

j'aimerais savoir si je peux ou pas laisser label dans un div (perso je l met car c'est pour aligné correctement avec mes inputs

pour info j'ai fais un faux select car ça me convient plus qu'un vrai select html

sinon a part ca es-ce que je peux laisser comme ça ou je dois modifier une ou 2 balises

merci

**NoSmoking** · 12/02/2017, 20h11

Bonjour,

j'ai mis des li ol afin de compter

j'ai du mal à visualiser le but !

Rapidement on peut noter que cette partie de code

Code html :

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

1
2
3
4
5
6
7
8
    <span class="select-normal">
      <span class="select-normal-choix icon-select">Choix dans la liste</span>
      <ol class="select-choix-liste">
        <li>France</li>
        <li>Belgigique</li>
        <li>Portugal</li>
      </ol>
    </span>

est non conforme au validateur.

**koala19100** · 20/02/2017, 13h22

merci,

j'ai pas lu ta réponse mais j'ai modifié entre temps

Code html :

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

1
2
3
4
5
6
7
8
	  <div><label class="label-inscription">pays : *</label>      <div class="dropdown choix select-editer">
	  <span class="hida1 icon-select">Choix dans la liste</span>
	  <ol class="mutliSelect1 select-normal">
	  <li>France</li>
	  <li>Belgique</li>
	  <li>Portugal</li>
	  </ol>
	  </div></div>

Code html :

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
<div class="multiple-choix"><label class="label-editer">couleur des cheveux :</label>	  <span class="choix-liste hida1 choix-actif icon-select">Choix dans la liste</span>
	  <span class="choix-membre"></span>
	  <div class="select-multiple-choix mutliSelect1">
	  <ol class="select-choix">
	  <li><input type="checkbox" value="chatains" />chatains</li>
	  <li><input type="checkbox" value="bruns" />bruns</li>
	  <li><input type="checkbox" value="noirs" />noirs</li>
	  </ol>
	  <ol class="select-choix">
	  <li><input type="checkbox" value="blonds" />blonds</li>
	  <li><input type="checkbox" value="poivre et sel" />poivre et sel</li>
	  <li><input type="checkbox" value="blancs" />blancs</li>
	  </ol>
	  <ol class="select-choix">
	  <li><input type="checkbox" value="roux" />roux</li>
	  <li><input type="checkbox" value="autres" />autres</li>
	  </ol>
	  </div></div>