Select - change background color

by tomsx

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<select id="colors" class="colors2" size="5" style="height:80px;width:100px">
 <option value="1" data-bgcolor="red" data-color="white">red</option>
 <option value="2" data-bgcolor="green" data-color="white">green</option>
 <option value="3" data-bgcolor="yellow" data-color="black" >yellow</option>
</select>

CSS

select option:first-child { color:red; }

JavaScript

$("select#colors").change(function () {
  var $thisMenu = $(this);
  $thisMenu.children("option").css("background", "");
  var $thisOption = $thisMenu.children("option:selected");
  var bgcolor = $thisOption.data("bgcolor");
  var color = $thisOption.data("color");
  $thisOption.css("background", "linear-gradient(0deg, "+ bgcolor +" 0%, "+ bgcolor +" 100%)");
  

      
   $thisOption.css("color", "linear-gradient(0deg, "+ color +" 0%, "+ color +" 100%)"); 
});