JSFiddle - React, Tailwind, and code Playground

by ozzymcduff

HTML

<select name="colorlist" id="colorlist">
  <option value="#632423" class="red">red</option>
  <option class="blue">blue</option>
  <option class="yellow">yellow</option>
</select>

CSS

select option {
   line-height: 10px;
 }
/*option.hover, option:hover
    { 
        background-color:white;
        color:white;
    }*/

select option.red{
    color: red; 
    background-color: red; 
 }
select option.blue{
    color: blue; 
    background-color: blue; 
} 
select option.yellow{
    color: yellow; 
    background-color: yellow; 
}

JavaScript

$(document).ready(function(){
$('#colorlist', this).each(
    function ()    {
        $(this).css({'color':$(this).val()});
    }
)
 });