Selectbox (kleur weghalen)
Misschien een rare vraag, maar is het mogelijk om die blauwe leur weg te halen als je in een select over een optie heen gaat. zo ja,welke code is daarvoor benodigd in css.
Tenzij je zelf een alternatieve <select> maakt met <ul>, <li> en <input> of zo.
Offtopic:
Probleempje van mij. Als common controls niet kunnen gestyled worden zoals gewild, maak ik ze zelf custom. In plaats van wal langer te zoeken ...
----
Als het je (of gelijk wie anders) interesseert, hier een scriptje dat ik vlug gemaakt heb.
Het verandert elke <select> en maakt er een custom combobox van.
Ik heb die blauwe achtergrond groen gemaakt
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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
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
<select name="fruit">
<option value="appel">appel</option>
<option value="peer">peer</option>
<option value="citroen">citroen</option>
</select>
<div>Lorem ipsum enzovoort enzovoort</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function() {
var selectElements = $('select');
selectElements.each(function(i) {
select2combobox(selectElements[i]);
});
// just like the click on the <select>
$('body').on('focus', '.custom_select .input', function() {
var li = $(this).parent('li');
li.siblings('.option').removeClass('invisible'); // alle broers/zussen van die <li> zichtbaar maken
});
// just like the blur of the <select>
$('body').on('blur', '.custom_select .input', function() {
var li = $(this).parent('li');
setTimeout(function() {
li.siblings('.option').addClass('invisible'); // alle broers/zussen van die <li> onzichtbaar maken
}, 200);
});
$('body').on('click', '.custom_select .option', function() {
var input = $(this).siblings('li').eq(0).children('.input');
input.val($(this).data('value'));
});
})
// function generates the combo box and removes the <select>
function select2combobox(select) {
var output = '';
var options = $(select).children('option');
for (var i=0; i<options.length; i++) {
output += '<li class="option invisible" data-value="' + options.eq(i).val() + '">' + options.eq(i).html() + '</li>';
}
output = '<ul class="custom_select"><li><input class="input" name="' + $(select).attr('name') + '">' + output + '</li></ul>';
$(select).before(output).remove();
}
</script>
<style>
.custom_select {
list-style: none;
margin: 0;
padding: 0;
width: 160px; /* = iets groter dan een standaard <input> */
height: 30px;
position: relative;
}
.custom_select li {
list-style: none;
cursor: pointer;
margin: 0;
padding: 0;
width: 100%;
z-index: 10;
background-color: #eee;
}
.custom_select .invisible {
display: none;
}
.custom_select li .input {
readonly: readonly;
}
.custom_select li {
border-left: 1px solid grey;
border-right: 1px solid grey;
}
.custom_select li:last-child {
border-bottom: 1px solid grey;
}
.custom_select li:nth-child(2) {
border-top: 1px solid grey;
}
.custom_select li:first-child {
border: none;
}
.custom_select li.option:hover {
background-color: green;
}
</style>
<option value="appel">appel</option>
<option value="peer">peer</option>
<option value="citroen">citroen</option>
</select>
<div>Lorem ipsum enzovoort enzovoort</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function() {
var selectElements = $('select');
selectElements.each(function(i) {
select2combobox(selectElements[i]);
});
// just like the click on the <select>
$('body').on('focus', '.custom_select .input', function() {
var li = $(this).parent('li');
li.siblings('.option').removeClass('invisible'); // alle broers/zussen van die <li> zichtbaar maken
});
// just like the blur of the <select>
$('body').on('blur', '.custom_select .input', function() {
var li = $(this).parent('li');
setTimeout(function() {
li.siblings('.option').addClass('invisible'); // alle broers/zussen van die <li> onzichtbaar maken
}, 200);
});
$('body').on('click', '.custom_select .option', function() {
var input = $(this).siblings('li').eq(0).children('.input');
input.val($(this).data('value'));
});
})
// function generates the combo box and removes the <select>
function select2combobox(select) {
var output = '';
var options = $(select).children('option');
for (var i=0; i<options.length; i++) {
output += '<li class="option invisible" data-value="' + options.eq(i).val() + '">' + options.eq(i).html() + '</li>';
}
output = '<ul class="custom_select"><li><input class="input" name="' + $(select).attr('name') + '">' + output + '</li></ul>';
$(select).before(output).remove();
}
</script>
<style>
.custom_select {
list-style: none;
margin: 0;
padding: 0;
width: 160px; /* = iets groter dan een standaard <input> */
height: 30px;
position: relative;
}
.custom_select li {
list-style: none;
cursor: pointer;
margin: 0;
padding: 0;
width: 100%;
z-index: 10;
background-color: #eee;
}
.custom_select .invisible {
display: none;
}
.custom_select li .input {
readonly: readonly;
}
.custom_select li {
border-left: 1px solid grey;
border-right: 1px solid grey;
}
.custom_select li:last-child {
border-bottom: 1px solid grey;
}
.custom_select li:nth-child(2) {
border-top: 1px solid grey;
}
.custom_select li:first-child {
border: none;
}
.custom_select li.option:hover {
background-color: green;
}
</style>
... er is nog werk aan.
Gewijzigd op 05/07/2013 13:20:32 door Kris Peeters