Eigen select maken
Hieronder twee plaatjes om het te verduidelijken en de div's + css.
(Het is even als voorbeeldje om in de database een lid op te zoeken. Met javascript krijg je als je op bijvoorbeeld Gebruikersnaam klikt in de input als value ook Gebruikersnaam. Met die input zoek ik dan d.m.v. php)
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<div class="select open">
<li> <input type="text" name="zoekop" class="iselect" value="Selecteer..." onfocus="this.blur()" readonly="readonly"/> </li>
<li class="vgb"> Gebruikersnaam </li>
<li class="vem"> E-mailadres </li>
<li class="vrk"> Rank </li>
<li class="vhi"> Help ID </li>
<div id="clear"></div>
</div>
<li> <input type="text" name="zoekop" class="iselect" value="Selecteer..." onfocus="this.blur()" readonly="readonly"/> </li>
<li class="vgb"> Gebruikersnaam </li>
<li class="vem"> E-mailadres </li>
<li class="vrk"> Rank </li>
<li class="vhi"> Help ID </li>
<div id="clear"></div>
</div>
Code (php)
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
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
.select {
background-image: url("../images/select.png");
background-repeat: no-repeat;
background-position: top right;
background-color: #FFFFFF;
width: 141px;
border: 1px solid #e0e0e0;
border-bottom: none;
margin-left: 2px;
overflow: hidden;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
.open {
height: 30px;
overflow: hidden;
}
.opend {
height: auto;
}
.select li:first-child:hover {
color: #7A7A7A;
}
.select li {
color: #7A7A7A;
line-height: 29px;
padding-left: 7px;
margin: 0;
border-bottom: 1px solid #E0E0E0;
list-style-type: none;
cursor: default;
-webkit-transition: all 250ms;
-moz-transition: all 250ms;
-ms-transition: all 250ms;
-o-transition: all 250ms;
transition: all 250ms;
}
.select li:hover {
color: #D36999;
}
.select .iselect {
background-color: transparent;
font-family: Arial, sans-serif;
font-size: 12px;
font-weight: normal;
color: #7A7A7A;
text-shadow: 0px 1px 0px #ffffff;
text-decoration: none;
border: none;
padding: 0;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
background-image: url("../images/select.png");
background-repeat: no-repeat;
background-position: top right;
background-color: #FFFFFF;
width: 141px;
border: 1px solid #e0e0e0;
border-bottom: none;
margin-left: 2px;
overflow: hidden;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
.open {
height: 30px;
overflow: hidden;
}
.opend {
height: auto;
}
.select li:first-child:hover {
color: #7A7A7A;
}
.select li {
color: #7A7A7A;
line-height: 29px;
padding-left: 7px;
margin: 0;
border-bottom: 1px solid #E0E0E0;
list-style-type: none;
cursor: default;
-webkit-transition: all 250ms;
-moz-transition: all 250ms;
-ms-transition: all 250ms;
-o-transition: all 250ms;
transition: all 250ms;
}
.select li:hover {
color: #D36999;
}
.select .iselect {
background-color: transparent;
font-family: Arial, sans-serif;
font-size: 12px;
font-weight: normal;
color: #7A7A7A;
text-shadow: 0px 1px 0px #ffffff;
text-decoration: none;
border: none;
padding: 0;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
Gewijzigd op 15/02/2013 18:15:02 door Machiel K
PS. wel opvallend dat je li elementen niet in een ul of ol hebt staan. Volgens mij is dat incorrecte html.
Gewijzigd op 15/02/2013 18:20:06 door Erwin H
geef een z-index op met een hoge waarde
Code (php)
1
2
3
2
3
.open {
z-index:5000;
}
z-index:5000;
}
Frank Nietbelangrijk op 15/02/2013 18:20:12:
Code (php)
1
2
3
2
3
.open {
z-index:5000;
}
z-index:5000;
}
Geen effect, ik zal is wat met position proberen.
Erwin H op 15/02/2013 18:19:10:
PS. wel opvallend dat je li elementen niet in een ul of ol hebt staan. Volgens mij is dat incorrecte html.
Is verandering in gebracht :)
Gewijzigd op 15/02/2013 18:35:45 door Machiel K
Ik zou een div maken, daar een a in zetten (die triggert de opties) en een ul met de opties.
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<div class="select">
<a href="#" title="Selecteer...">Selecteer...</a>
<ul>
<li class="vgb"> Gebruikersnaam </li>
<li class="vem"> E-mailadres </li>
<li class="vrk"> Rank </li>
<li class="vhi"> Help ID </li>
</ul>
</div>
<a href="#" title="Selecteer...">Selecteer...</a>
<ul>
<li class="vgb"> Gebruikersnaam </li>
<li class="vem"> E-mailadres </li>
<li class="vrk"> Rank </li>
<li class="vhi"> Help ID </li>
</ul>
</div>
Die ul kun je dan absolute positioneren waardoor hij over het onderste input veld valt. En verwijder de clear, dat is een onnodige div en rommel. Met overflow: hidden; kun je ook iets clearen en anders moet je :after gebruiken..
Eventueel kun je ergens nog een hidden input neerzetten met de value van je select.
Gewijzigd op 15/02/2013 21:21:55 door Joakim Broden