Added selectColorize plugin

README.markdown

@@ -12,6 +12,7 @@ Visit the [project page](http://benalman.com/projects/jquery-misc-plugins/) for
 * [jQuery loadAdScript](http://benalman.com/projects/jquery-misc-plugins/#loadadscript) - Load third party ad network scripts that use `document.write` into specific containers.
 * [jQuery :nth-last-child selector](http://benalman.com/projects/jquery-misc-plugins/#nth-last-child) - Works exactly like jQuery's built-in :nth-child selector, except that it counts from the end. 
 * [jQuery scrollbarWidth](http://benalman.com/projects/jquery-misc-plugins/#scrollbarwidth) - Calculate the scrollbar width dynamically!
+* [jQuery selectColorize](http://benalman.com/projects/jquery-misc-plugins/#selectcolorize) - Basic cross-browser colored select boxes.
 * [jQuery serializeObject](http://benalman.com/projects/jquery-misc-plugins/#serializeobject) - Serialize a form into an object.
 * [jQuery viewportOffset](http://benalman.com/projects/jquery-misc-plugins/#viewportoffset) - Calculate left and top from the element's position relative to the viewport, not the document.
 

examples/selectcolorize/index.php

@@ -0,0 +1,199 @@
+<?PHP
+
+include "../index.php";
+
+$shell['title3'] = "selectColorize";
+
+$shell['h2'] = 'Basic cross-browser colored select boxes';
+
+// ========================================================================== //
+// SCRIPT
+// ========================================================================== //
+
+ob_start();
+?>
+$(function(){
+
+  $('a.enable').click(function(){
+    // Calling .change() might be necessary to visually update selects in
+    // all browsers, if multiple selects are being initialized at the same
+    // time.
+    $('select').selectColorize().change(); // Initialize.
+  });
+
+  $('a.destroy').click(function(){
+    $('select').selectColorize( false ); // Destroy.
+  });
+
+});
+<?
+$shell['script'] = ob_get_contents();
+ob_end_clean();
+
+// ========================================================================== //
+// HTML HEAD ADDITIONAL
+// ========================================================================== //
+
+ob_start();
+?>
+<script type="text/javascript" src="../../jquery.ba-selectcolorize.js"></script>
+<script type="text/javascript" language="javascript">
+
+<?= $shell['script']; ?>
+
+$(function(){
+
+  // Prevent default click action for example links.
+  $('a.example').click(function(e){
+    e.preventDefault();
+  });
+
+  // Syntax highlighter.
+  SyntaxHighlighter.highlight();
+
+});
+
+</script>
+<style type="text/css" title="text/css">
+
+/*
+bg: #FDEBDC
+bg1: #FFD6AF
+bg2: #FFAB59
+orange: #FF7F00
+brown: #913D00
+lt. brown: #C4884F
+*/
+
+#page {
+  width: 700px;
+}
+
+/* options inherit from the select (but not in webkit) */
+
+select {
+  margin-top: 0.3em;
+}
+
+select.first,
+select.fourth {
+    color: #777;
+}
+
+select.second {
+    background: #777;
+}
+
+select.third {
+    color: orange;
+    background: #ffc;
+}
+​
+
+</style>
+<?
+$shell['html_head'] = ob_get_contents();
+ob_end_clean();
+
+// ========================================================================== //
+// HTML BODY
+// ========================================================================== //
+
+ob_start();
+?>
+<?= $shell['donate'] ?>
+
+<p>
+  By default, select elements in Internet Explorer and Opera show the selected option's color and background color, while Firefox and WebKit browsers do not. <a href="http://benalman.com/projects/jquery-misc-plugins/#selectcolorize">jQuery selectColorize</a> normalizes this behavior cross-browser for basic select box color styling, without having to resort to more "fancy" select box replacements.
+</p>
+<p>
+  <em>Note that inline option color/background styles are necessary in Firefox due to an annoying getComputedStyle bug. Also, due to rendering issues in Firefox and Opera, it's best to set a background color on the select element if any of its options have background colors, otherwise it may have initial rendering issues.</em>
+</p>
+
+<p>
+  <a href="#" class="enable example">Enable selectColorize</a>, <a href="#" class="destroy example">Destroy selectColorize</a>
+</p>
+
+<select class="first">
+    <option>------</option>
+    <option style="color:#f00;background:#fcc;" selected="selected">Sample red option, fg+bg</option>
+    <option style="color:#0a0;background:#cfc;">Sample green option, fg+bg</option>
+    <option style="color:#00f;background:#ccf;">Sample blue option, fg+bg</option>
+    <option style="color:#f00;">Sample red option, fg</option>
+    <option style="color:#0a0;">Sample green option, fg</option>
+    <option style="color:#00f;">Sample blue option, fg</option>
+    <option style="background:#fcc;">Sample red option, bg</option>
+    <option style="background:#cfc;">Sample green option, bg</option>
+    <option style="background:#ccf;">Sample blue option, bg</option>
+</select>
+
+(select fg color set via CSS, options have fg+bg colors)
+
+<br>
+
+<select class="second">
+    <option>------</option>
+    <option style="color:#f00;background:#fcc;">Sample red option, fg+bg</option>
+    <option style="color:#0a0;background:#cfc;" selected="selected">Sample green option, fg+bg</option>
+    <option style="color:#00f;background:#ccf;">Sample blue option, fg+bg</option>
+    <option style="color:#f00;">Sample red option, fg</option>
+    <option style="color:#0a0;">Sample green option, fg</option>
+    <option style="color:#00f;">Sample blue option, fg</option>
+    <option style="background:#fcc;">Sample red option, bg</option>
+    <option style="background:#cfc;">Sample green option, bg</option>
+    <option style="background:#ccf;">Sample blue option, bg</option>
+</select>
+
+(select bg color set via CSS, options have fg+bg colors)
+
+<br>
+
+<select class="third">
+    <option>------</option>
+    <option style="color:#f00;background:#fcc;">Sample red option, fg+bg</option>
+    <option style="color:#0a0;background:#cfc;">Sample green option, fg+bg</option>
+    <option style="color:#00f;background:#ccf;" selected="selected">Sample blue option, fg+bg</option>
+    <option style="color:#f00;">Sample red option, fg</option>
+    <option style="color:#0a0;">Sample green option, fg</option>
+    <option style="color:#00f;">Sample blue option, fg</option>
+    <option style="background:#fcc;">Sample red option, bg</option>
+    <option style="background:#cfc;">Sample green option, bg</option>
+    <option style="background:#ccf;">Sample blue option, bg</option>
+</select>
+
+(select fg and bg colors set via CSS, options have fg+bg colors)
+
+<br>
+
+<select class="fourth">
+    <option>------</option>
+    <option style="color:#f00;">Sample red option, fg</option>
+    <option style="color:#0a0;" selected="selected">Sample green option, fg</option>
+    <option style="color:#00f;">Sample blue option, fg</option>
+</select>
+
+(select fg color set via CSS, options only have fg colors)
+
+
+
+<h3>The code</h3>
+
+<div class="clear"></div>
+
+<pre class="brush:js">
+<?= htmlspecialchars( $shell['script'] ); ?>
+</pre>
+
+
+
+<?
+$shell['html_body'] = ob_get_contents();
+ob_end_clean();
+
+// ========================================================================== //
+// DRAW SHELL
+// ========================================================================== //
+
+draw_shell();
+
+?>

jquery.ba-selectcolorize.js

@@ -0,0 +1,102 @@
+/*!
+* jQuery selectColorize - v0.2 - 3/8/2010
+* http://benalman.com/projects/jquery-misc-plugins/
+*
+* Copyright (c) 2010 "Cowboy" Ben Alman
+* Dual licensed under the MIT and GPL licenses.
+* http://benalman.com/about/license/
+*/
+
+(function($,undefined){
+  '$:nomunge'; // Used by YUI compressor.
+
+  // Some reused strings.
+  var selectColorize = 'selectColorize',
+    event_name = 'change.' + selectColorize,
+    style = 'style',
+    color = 'color',
+    backgroundColor = 'backgroundColor';
+
+  $.fn[ selectColorize ] = function( destroy ) {
+    // Unbind event.
+    var that = this.unbind( event_name );
+
+    // Initialize or destroy.
+    that.each(function(){
+      var select = $(this),
+
+        // These colors may need to be set on options.
+        select_color = select.css( color ),
+        select_backgroundColor = select.css( backgroundColor );
+
+      if ( destroy !== undefined ) {
+
+        // Cleanup select and all options.
+        select.find('option').andSelf().each(function(){
+          var elem = $(this),
+            data = elem.data( selectColorize );
+
+          // Revert the element style attribute back to its original state.
+          data && elem[ data[ style ] ? 'attr' : 'removeAttr' ]( style, data[ style ] );
+
+          // Remove any stored data.
+          elem.removeData( selectColorize );
+        });
+
+      } else if ( !select.data( selectColorize ) ) {
+
+        // Store select style attribute for later cleanup.
+        select.data( selectColorize, { style: select.attr( style ) } );
+
+        // For each option that doesn't have an inline color or backgroundColor,
+        // set its color and backgroundColor to the select's.
+        select.find('option').each(function(){
+          var option = $(this),
+            opt_style = this.style;
+
+          // Store option style attribute for later cleanup.
+          option.data( selectColorize, { style: option.attr( style ) } );
+
+          // Update the option's color and backgroundColor with that of the
+          // select's if they are unspecified.
+          opt_style[ color ] || option.css( color, select_color );
+          opt_style[ backgroundColor ] || option.css( backgroundColor, select_backgroundColor );
+        });
+      }
+    });
+
+    if ( destroy === undefined ) {
+
+      // Bind event.
+      that
+        .bind( event_name, function(){
+          var select = $(this),
+
+            // Get the selected option.
+            option = select.find( 'option:selected' ),
+
+            // This object will hold the CSS properties.
+            css = {},
+
+            bg_color;
+
+          // Change the select's color to that of its selected option. If the
+          // option has no inline style color set, use the default color.
+          if ( option.length ) {
+            css[ color ] = option.css( color );
+
+            // WebKit won't colorize a select if the background is solid white,
+            // go figure.
+            bg_color = option.css( backgroundColor );
+            css[ backgroundColor ] = bg_color === 'rgb(255, 255, 255)' ? '#fffffe' : bg_color;
+
+            select.css( css );
+          }
+        })
+        .triggerHandler( event_name );
+    }
+
+    return that;
+  };
+
+})(jQuery);

jquery.ba-selectcolorize.min.js

@@ -0,0 +1,9 @@
+/*
+* jQuery selectColorize - v0.2 - 3/8/2010
+* http://benalman.com/projects/jquery-misc-plugins/
+*
+* Copyright (c) 2010 "Cowboy" Ben Alman
+* Dual licensed under the MIT and GPL licenses.
+* http://benalman.com/about/license/
+*/
+(function($,f){var e="selectColorize",d="change."+e,c="style",b="color",a="backgroundColor";$.fn[e]=function(g){var h=this.unbind(d);h.each(function(){var i=$(this),k=i.css(b),j=i.css(a);if(g!==f){i.find("option").andSelf().each(function(){var l=$(this),m=l.data(e);m&&l[m[c]?"attr":"removeAttr"](c,m[c]);l.removeData(e)})}else{if(!i.data(e)){i.data(e,{style:i.attr(c)});i.find("option").each(function(){var m=$(this),l=this.style;m.data(e,{style:m.attr(c)});l[b]||m.css(b,k);l[a]||m.css(a,j)})}}});if(g===f){h.bind(d,function(){var i=$(this),k=i.find("option:selected"),j={},l;if(k.length){j[b]=k.css(b);l=k.css(a);j[a]=l==="rgb(255, 255, 255)"?"#fffffe":l;i.css(j)}}).triggerHandler(d)}return h}})(jQuery);