html css select dropdown color code example

Example 1: change default select option 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: change option tag css

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-select.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap-select.min.js"></script>

<select class="selectpicker">
  <option>Mustard</option>
  <option class="special">Ketchup</option>
  <option style="background: #5cb85c; color: #fff;">Relish</option>
</select>