JSFiddle - React, Tailwind, and code Playground

by mrigess

HTML

<select class="ad_control">
    <optgroup label="with Group Columns" disabled>
        <option>Sum</option>
        <option>Min</option>    
        <option>Max</option>    
    </optgroup>
    <optgroup label="without Group Columns">
        <option>Stdev</option>
        <option disabled>Var</option>    
        <option>Checksum Agg.</option>    
    </optgroup>
</select>

CSS

.ad_control{
     border-bottom: 1px solid #11487D;
     border-right: 1px solid #11487D;
     border-left: 1px solid #11487D;
     border-top:1px solid #11487D;
     color:#000066;
     height:20;
     font-size:10px;
}

JavaScript

//$('option:disabled').attr('style', 'color:#ccc');
$('option:disabled').each(function(){
    $(this).attr('style','color:red');
});