YUI recommends YUI3.
YUI 2 has been deprecated since 2011. This site acts as an archive for files and documentation.
This documentation is no longer maintained.
Using Progressive Enhancement to skin checkboxes with the help of the YUILoader
and the Event Utility's
blur events and the
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
background on the
<input type="checkbox"> element. Additionally, IE 6 and IE 7 (Quirks Mode)
lack support for attribute selectors necessary to style the
disabled states. Additionally, IE 6 and 7 only support the
: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
<input type="checkbox"> element
consistently well in all of the
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
element is wrapped by two
To style each checkbox, a class name of
yui-checkbox will be applied to the
<span> wrapping each
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:
For this example, the following state-based class names will be used:
The styles for each checkbox comes together as follows:
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
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
blur events do not bubble, use the Event Utility's
focusout events as an alternative to
attaching discrete focus and blur event handlers to the
element of each skinned checkbox. The specialized
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:
<head> used to temporarily hide the markup
from seeing a flash unstyled content.
Note: Logging and debugging is currently turned off for this example.
All YUI 2.x users should review the YUI 2.8.2 security bulletin, which discusses a vulnerability present in YUI 2.4.0-2.8.1.
Copyright © 2013 Yahoo! Inc. All rights reserved.