change default select option color

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>