1/*with a little bit of styling and javascript, you can have a select box with coloured options*/
2/*Note that size attribute = 2 or greater plays an important role here*/
3<style>
4select option:checked {
5 background: #ff9500 -webkit-linear-gradient(bottom, #ff9500 0%, #ff9500 100%);
6}
7select option:hover {
8 background: #ff9500 -webkit-linear-gradient(bottom, #ff9500 0%, #ff9500 100%);
9 color: #fff;
10}
11select option {
12 padding: 8px;
13}
14select {
15 z-index: 1800;
16 position: absolute;
17 background: #fff;
18 height: 33px;
19 overflow: hidden;
20 width: 30%;
21 outline: none;
22}
23</style>
24
25<select id="colored_select" size="2" onclick="select_option()">
26 <option value="" selected>Select</option>
27 <option value="1">One</option>
28 <option value="2">Two</option>
29 <option value="3">Three</option>
30 <option value="4">Four</option>
31 <option value="5">Five</option>
32 <option value="6">Six</option>
33 <option value="7">Seven</option>
34 <option value="8">Eight</option>
35</select>
36
37<script>
38 function select_option(){
39 var selectBox = document.getElementById("colored_select");
40 $size = selectBox.size;
41 $set_size = 4;
42 if ($size == $set_size) {
43 selectBox.size = 2;
44 selectBox.style.overflow = 'hidden';
45 } else {
46 selectBox.size = $set_size;
47 selectBox.style.height = 'auto';
48 selectBox.style.overflow = 'auto';
49 }
50 var selectedOptionTop = selectBox.options[selectBox.selectedIndex].offsetTop;
51 selectBox.scrollTop = selectedOptionTop;
52 }
53</script>