JSFiddle - React, Tailwind, and code Playground

by agib

HTML

<select name="" id="theselect" size="20" onchange="this.className=this.options[this.selectedIndex].className">
    <option value="" selected>Option 1</option>
    <option value="">Option 2</option>
    <option value="">Option 3</option>
    <option value="">Option 4</option>
    <option value="">Option 5</option>
    <option value="">Option 6</option>
    <option value="">Option 7</option>
    <option value="">Option 8</option>
    <option value="">Option 9</option>
    <option value="">Option 10</option>
    <option value="">Option 11</option>
    <option value="">Option 12</option>
    <option value="">Option 13</option>
    <option value="">Option 14</option>
    <option value="">Option 15</option>
    <option value="">Option 16</option>
    <option value="">Option 17</option>
    <option value="">Option 18</option>
    <option value="">Option 19</option>
    <option value="">Option 20</option>
    <option value="">Option 21</option>
    <option value="">Option 22</option>
    <option value="">Option 23</option>
    <option value="">Option 24</option>
    <option value="">Option 25</option>
    <option value="">Option 26</option>
    <option value="">Option 27</option>
    <option value="">Option 28</option>
    <option value="">Option 29</option>
    <option value="">Option 30</option>
</select>

CSS

body {
    background-color: #E8E8E9;
    
}

select { 
    width: 400px; 
    margin: 20px;
    font-size: 16px;
}
select option {
    background-color: #F4F4F6;
    padding-bottom: 20px;
    
}

JavaScript

$( "#theselect" ).change(function() {
    $( "select option:selected" ).each(function() {
        $(this).css("background-color", "yellow");
    });
});