JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Change color to select box with jQuery</h1>
<ol>
    <li>
        <label><select>
            <option value="-1">Select a value</option>
            <option value="0">HTML</option>
            <option value="1" selected="selected">CSS</option>
            <option value="2">JavaScript</option>
            <option value="3">jQuery</option>
            <option value="4">Dojo</option>
            <option value="5">MooTools</option>
            <option value="6">Prototype</option>
            <option value="7">Backbone.js</option>
            <option value="8">Ember.js</option>
            <option value="9">Node.js</option>
        </select> pre-selected</label>
    </li>
    <li>
        <label><select disabled="disabled">
            <option value="-1">Select a value</option>
            <option value="0">HTML</option>
            <option value="1">CSS</option>
            <option value="2">JavaScript</option>
            <option value="3">jQuery</option>
            <option value="4">Dojo</option>
            <option value="5">MooTools</option>
            <option value="6">Prototype</option>
            <option value="7">Backbone.js</option>
            <option value="8">Ember.js</option>
            <option value="9">Node.js</option>
        </select> select disabled</label>
    </li>
    <li>
        <label><select>
            <option value="-1">Select a value</option>
            <option value="0" disabled="disabled">HTML</option>
            <option value="1">CSS</option>
            <option value="2">JavaScript</option>
            <option value="3">jQuery</option>
            <option value="4">Dojo</option>
            <option value="5">MooTools</option>
            <option value="6">Prototype</option>
            <option value="7">Backbone.js</option>
            <option value="8">Ember.js</option>
            <option value="9">Node.js</option>
        </select> one option disabled</label>
    </li>
    <li>
        <select>
            <option...

CSS

/* code not necessary for the effect, just to make it pretty */
html {
    background-color: #EEE;
    overflow-y: scroll;
}
body {
    color: #333;
    font-family: Verdana;
    font-size: 14px;
    margin: 0 auto;
    padding: 1em;
    max-width: 480px;
}
h1 {
    color: #6D0019;
    font-size: 22px;
    margin: 0 auto 1em;
    text-align: center;
}
li {
    font-size: 13px;
}
footer {
    font-size: 0.9em;
    font-variant: small-caps;
    margin: 3em 0 0;
}

/* selectColored */
select.colorize option:not([disabled]) {
	color: #000; /* Firefox only */
}
select.colorize option.def:not([disabled]),
select.colorize.empty:not([disabled]) {
    background-size: 0; /* Webkit hack */
	color: #999;
}

JavaScript

(function($) {
	// Color the empty select
	$.fn.selectColored = function(options) {
		var defaults = {
			def        : -1,
			classSel   : 'colorize',
			classEmpty : 'empty',
			classDef   : 'def'
		};
		// extend default options with those provided
		var opts = $.extend(defaults, options);

		// implementation code
		return this.each(function() {
			var $select = $(this);
			$select
				.addClass(opts.classSel)
				.find('option[value="' + opts.def + '"]')
				.addClass(opts.classDef);

			function color() {
				$select.toggleClass(opts.classEmpty, ($select.val() == opts.def));
			}

			$select.bind('change', function() {
				color();
			});

			// initialize
			color();
		});
	};// end plugin definition
})(jQuery);


$(document).ready(function() {
    $('select').selectColored();
});