Using Progressive Enhancement to skin checkboxes with the help of the YUILoader 
and the Event Utility's focus and blur events and the 
delegate method.
There are a few challenges when trying to skin an HTML checkbox using CSS.  To start, most of the 
A-grade browsers don't provide
support for CSS properties like border and background on the 
<input type="checkbox"> element.  Additionally, IE 6 and IE 7 (Quirks Mode) 
lack support for attribute selectors  necessary to style the checked and 
disabled states.  Additionally, IE 6 and 7 only support the :focus and 
:active pseudo classes on <a> elements, both of which are needed 
to style a checkbox when it is focused or depressed.
Despite the shortcomings in cross-browser CSS support, with a little extra markup and through the use of 
JavaScript it is possible to skin an <input type="checkbox"> element 
consistently well in all of the
A-grade browsers.
Since CSS support for the <input type="checkbox"> element is lacking, wrap 
<input type="checkbox"> elements in one or more inline elements to provide the 
necessary hooks for styling.  In this example, each <input type="checkbox"> 
element is wrapped by two <span>s.
To style each checkbox, a class name of yui-checkbox will be applied to the 
outtermost <span> wrapping each <input type="checkbox"> 
element.  An additional class will be used to represent the various states of each checkbox.  The 
class name for each state will follow a consistent pattern: yui-checkbox-[state].  
For this example, the following state-based class names will be used:
yui-checkbox-focusyui-checkbox-activeyui-checkbox-checkedThe styles for each checkbox comes together as follows:
Application and removal of the state-based class names will be facilitated by JavaScript event 
handlers.  Each event handler will track the state of the 
<input type="checkbox"> element, and apply and remove corresponding 
state-based class names from its outtermost <span>  
making it easy to style each state.  And since each JavaScript is required for state management, 
the stylesheet for the skinned checkboxes will only be added to the page when JavaScript is
enabled.  This will ensure that each checkbox works correctly with and without JavaScript enabled.
Since there could easily be many instances of a skinned checkbox on the page, all event listeners will be attached to the containing element for all checkboxes. Each listener will listen for events as they bubble up from each checkbox. Relying on event bubbling will improve the overall performance of the page by reducing the number of event handlers.
Since the DOM focus and blur events do not bubble, use the Event Utility's 
specialized focusin and focusout events as an alternative to 
attaching discrete focus and blur event handlers to the <input type="checkbox">
element of each skinned checkbox.  The specialized focusin and 
focusout events make it possible to attach a single focus and blur event 
listener on the containing element of each checkbox  thereby increasing the performance 
of the page.  The complete script for the example comes together as follows:
The markup above will be transformed using both CSS and JavaScript.  To account 
for the scenario where the user has CSS enabled in their browser but JavaScript 
is disabled, the CSS used to style the checkboxes will be loaded via JavaScript 
using the 
YUI Loader.
Additionally, a small block of JavaScript will be placed in the 
<head>  used to temporarily hide the markup 
while the JavaScript and CSS are in the process of loading to prevent the user 
from seeing a flash unstyled content.
You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.
Note: Logging and debugging is currently turned off for this example.
Copyright © 2011 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings