how to style options in select code example

Example 1: select box change options color

/*with a little bit of styling and javascript, you can have a select box with coloured options*/
/*Note that size attribute = 2 or greater plays an important role here*/
<style>
select option:checked {
  background: #ff9500 -webkit-linear-gradient(bottom, #ff9500 0%, #ff9500 100%);
}
select option:hover {
  background: #ff9500 -webkit-linear-gradient(bottom, #ff9500 0%, #ff9500 100%);
  color: #fff;
}
select option {
  padding: 8px;
}
select {
  z-index: 1800; 
  position: absolute; 
  background: #fff; 
  height: 33px; 
  overflow: hidden; 
  width: 30%;
  outline: none;
}
</style>

<select id="colored_select" size="2" onclick="select_option()">
  <option value="" selected>Select</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>  
  <option value="4">Four</option>                    
  <option value="5">Five</option>                    
  <option value="6">Six</option>                    
  <option value="7">Seven</option>                    
  <option value="8">Eight</option>                    
</select>

<script>
 function select_option(){
    var selectBox = document.getElementById("colored_select");
    $size = selectBox.size;
    $set_size = 4;
    if ($size == $set_size) {
      selectBox.size = 2;
      selectBox.style.overflow = 'hidden';
    } else {
      selectBox.size = $set_size;
      selectBox.style.height = 'auto';
      selectBox.style.overflow = 'auto';
    }
    var selectedOptionTop = selectBox.options[selectBox.selectedIndex].offsetTop;
    selectBox.scrollTop = selectedOptionTop;
  }
</script>

Example 2: option select css

body {
    padding:50px;
    background-color:white;
}
.s-hidden {
    visibility:hidden;
    padding-right:10px;
}
.select {
    cursor:pointer;
    display:inline-block;
    position:relative;
    font:normal 11px/22px Arial, Sans-Serif;
    color:black;
    border:1px solid #ccc;
}
.styledSelect {
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background-color:white;
    padding:0 10px;
    font-weight:bold;
}
.styledSelect:after {
    content:"";
    width:0;
    height:0;
    border:5px solid transparent;
    border-color:black transparent transparent transparent;
    position:absolute;
    top:9px;
    right:6px;
}
.styledSelect:active, .styledSelect.active {
    background-color:#eee;
}
.options {
    display:none;
    position:absolute;
    top:100%;
    right:0;
    left:0;
    z-index:999;
    margin:0 0;
    padding:0 0;
    list-style:none;
    border:1px solid #ccc;
    background-color:white;
    -webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.2);
    -moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.2);
    box-shadow:0 1px 2px rgba(0, 0, 0, 0.2);
}
.options li {
    padding:0 6px;
    margin:0 0;
    padding:0 10px;
}
.options li:hover {
    background-color:#39f;
    color:white;
}