Skip to content

Instantly share code, notes, and snippets.

@electricg
Created April 11, 2012 09:17
Show Gist options
  • Save electricg/2358196 to your computer and use it in GitHub Desktop.
Save electricg/2358196 to your computer and use it in GitHub Desktop.
Change color to select box with jQuery
/* 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;
}
<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 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>
</li>
<li>
<select>
<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>
</li>
<li>
<select>
<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>
</li>
</ol>
<p>Purpose of this script is to give a visual feedback to &lt;select&gt; boxes with no option selected. It is possible to decide which value is considered default in the script options.</p>
<footer>Works in Android Browser, Chrome, Chrome for Android, Dolphin Browser for Android, Firefox 1+, IE9, Opera 10+, Opera Mobile, Safari 5+</footer>
(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();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment