279N/A .yui3-js-enabled .yui3-checkboxes-loading { display: none; }
279N/A Using Progressive Enhancement to skin checkboxes with the help of the
279N/A Utility</a>, and the Event Utility's <code>focus</code> and
279N/A <code>blur</code> events and the <code>delegate</code> method.
279N/A {{>focus-example-source}}
840N/AThere are a few challenges when trying to skin an HTML checkbox using CSS. To start, most of the
279N/Asupport for CSS properties like <code>border</code> and <code>background</code> on the
279N/A<code><input type="checkbox"></code> element. Additionally, IE 6 and IE 7 (Quirks Mode)
279N/Alack support for attribute selectors — necessary to style the <code>checked</code> and
279N/A<code>disabled</code> states. Additionally, IE 6 and 7 only support the <code>:focus</code> and
840N/A<code>:active</code> pseudo classes on <code><a></code> elements, both of which are needed
447N/Ato style a checkbox when it is focused or depressed.
844N/ADespite the shortcomings in CSS support, with a little extra markup and through the use of
279N/AJavaScript it is possible to skin an <code><input type="checkbox"></code> element
279N/Aconsistently well in all of the
279N/ASince CSS support for the <code><input type="checkbox"></code> element is lacking, wrap
279N/A<code><input type="checkbox"></code> elements in one or more inline elements to provide the
279N/Anecessary hooks for styling. In this example, each <code><input type="checkbox"></code>
279N/Aelement is wrapped by two <code><span></code>s.
447N/A <input type="checkbox">
279N/ATo style each checkbox, a class name of <code>yui3-checkbox</code> will be applied to the
279N/Aouttermost <code><span></code> wrapping each <code><input type="checkbox"></code>
447N/Aelement. An additional class will be used to represent the various states of each checkbox. The
279N/Aclass name for each state will follow a consistent pattern: <code>yui3-checkbox-[state]</code>.
279N/AFor this example, the following state-based class names will be used:
279N/A <dt><code>yui3-checkbox-focus</code></dt>
447N/A <dd>The checkbox has focus</dd>
279N/A <dt><code>yui3-checkbox-active</code></dt>
279N/A <dd>The checkbox is active (pressed)</dd>
279N/A <dt><code>yui3-checkbox-checked</code></dt>
279N/A <dd>The checkbox is checked</dd>
The styles for each checkbox comes together as follows:
display: -moz-inline-stack; /* Gecko < 1.9, since it doesn't support "inline-block" */
display: inline-block; /* IE, Opera and Webkit, and Gecko 1.9 */
background-color: #fff; /* Need to set a background color or IE won't get mouse events */
Necessary for IE 6 (Quirks and Standards Mode) and IE 7 (Quirks Mode), since
they don't support use of negative margins without relative positioning.
/* Position the checkmark for Gecko, Opera and Webkit and IE 7 (Strict Mode). */
/* Position the checkmark for IE 6 (Strict and Quirks Mode) and IE 7 (Quirks Mode).*/
/* For Gecko < 1.9: Positions the checkbox on the same line as its corresponding label. */
.yui3-checkbox span:after {
Hide the actual checkbox offscreen so that it is out of view, but still accessible via
.yui3-checkbox-checked span {
/* Draw a custom checkmark for the checked state using a background image. */
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
<code><input type="checkbox"></code> element, and apply and remove corresponding
state-based class names from its outtermost <code><span></code> —
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 <code>focus</code> and <code>blur</code> events do not bubble, use the Event Utility's
<a href="../..
/api/YUI.html#event_focus"><code>focus</code></a> and
<a href="../..
/api/YUI.html#event_focus"><code>blur</code></a> custom events, as an alternative to
attaching discrete focus and blur event handlers to the <code><input type="checkbox"></code>
element of each skinned checkbox. The
<a href="../..
/api/YUI.html#event_focus"><code>focus</code></a> and
<a href="../..
/api/YUI.html#event_focus"><code>blur</code></a> custom events leverage
capture-phase DOM event listeners, making 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:
YUI().use("*", function(Y) {
sCheckboxFocusClass = getClassName("checkbox", "focus"), // Create yui3-checkbox-focus
sCheckboxCheckedClass = getClassName("checkbox", "checked"), // Create yui3-checkbox-checked
sCheckboxActiveClass = getClassName("checkbox", "active"), // Create yui3-checkbox-active
bKeyListenersInitialized = false,
bMouseListenersInitialized = false,
forAttr = (
UA.ie &&
UA.ie < 8) ? "htmlFor" : "for",
bBlockDocumentMouseUp = false,
bBlockClearActive = false,
var initKeyListeners = function () {
bKeyListenersInitialized = true;
var initMouseListeners = function () {
this.delegate("mouseover", onCheckboxMouseOver, ".yui3-checkbox");
this.delegate("mouseout", onCheckboxMouseOut, ".yui3-checkbox-active");
this.get("ownerDocument").on("mouseup", onDocumentMouseUp);
bMouseListenersInitialized = true;
var getCheckbox = function (node) {
var getCheckboxForLabel = function (label) {
oInput =
Y.one("#" + sID);
oCheckbox = getCheckbox(oInput);
var updateCheckedState = function (input) {
var oCheckbox = getCheckbox(input);
var setActiveCheckbox = function (checkbox) {
oActiveCheckbox = checkbox;
var clearActiveCheckbox = function () {
var onCheckboxMouseOver = function (event, matchedEl) {
var onCheckboxMouseOut = function (event) {
var onDocumentMouseUp = function (event) {
if (!bBlockDocumentMouseUp) {
bBlockDocumentMouseUp = false;
var onCheckboxFocus = function (event) {
// Remove the focus style from any checkbox that might still have it
var oCheckbox =
Y.one("#checkboxes").one(".yui3-checkbox-focus");
// Defer adding key-related and click event listeners until
// one of the checkboxes is initially focused.
if (!bKeyListenersInitialized) {
var oCheckbox = getCheckbox(this);
var onCheckboxBlur = function (event) {
var oCheckbox = getCheckbox(this);
bBlockClearActive = false;
var onCheckboxMouseDown = function (event) {
// Defer adding mouse-related and click event listeners until
// the user mouses down on one of the checkboxes.
if (!bMouseListenersInitialized) {
if (
this.get("nodeName").toLowerCase() === "label") {
// If the target of the event was the checkbox's label element, the
// label will dispatch a click event to the checkbox, meaning the
// "onCheckboxClick" handler will be called twice. For that reason
// it is necessary to block the "onDocumentMouseUp" handler from
// clearing the active state, so that a reference to the active
// checkbox still exists the second time the "onCheckboxClick"
bBlockDocumentMouseUp = true;
// When the user clicks the label instead of the checkbox itself,
// the checkbox will be blurred if it has focus. Since the
// "onCheckboxBlur" handler clears the active state it is
// necessary to block the clearing of the active state when the
// label is clicked instead of the checkbox itself.
bBlockClearActive = true;
oCheckbox = getCheckboxForLabel(this);
// Need to focus the input manually for two reasons:
// 1) Mousing down on a label in Webkit doesn't focus its
// 2) By default checkboxes are focused when the user mouses
// down on them. However, since the actually checkbox is
// obscurred by the two span elements that are used to
// style it, the checkbox wont' receive focus as it was
// never the actual target of the mousedown event.
// currently focused element in IE, so we'll use the "bBlockBlur"
// variable to stop the code in the blur event handler
setActiveCheckbox(oCheckbox);
// Need to call preventDefault because by default mousing down on
// an element will blur the element in the document that currently
// has focus--in this case, the input element that was
var onCheckboxClick = function (event) {
// If the click event was fired via the mouse the checked
// state will have to be manually updated since the input
// is hidden offscreen and therefore couldn't be the
updateCheckedState(oInput);
var onCheckboxKeyDown = function (event) {
// Style the checkbox as being active when the user presses the
Y.all("#checkboxes>div>span").addClass("yui3-checkbox");
// Remove the "yui3-checkboxes-loading" class used to hide the
// checkboxes now that the checkboxes have been skinned.
Y.one("#checkboxes").removeClass("yui3-checkboxes-loading");
// Add the minimum number of event listeners needed to start, bind the
Y.delegate("mousedown", onCheckboxMouseDown, "#checkboxes", ".yui3-checkbox,label");
Y.delegate("focus", onCheckboxFocus, "#checkboxes", "input[type=checkbox]");
<h4>Progressive Enhancement</h4>
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
base: "${buildDirectory}",
// Load the stylesheet for the skinned checkboxes via JavaScript,
// since without JavaScript skinning of the checkboxes wouldn't
requires: ["classnamemanager", "event-focus", "node-event-delegate", "checkboxcss"]
To prevent the user from seeing a flash unstyled content when JavaScript is enabled,
a style rule is created using YUI's <code>yui3-js-enabled</code> class name that will temporarily
hide the markup while the JavaScript and CSS are in the process of loading. For more on using the
<code>yui3-js-enabled</code> class name, see the
<a href="../../widget/#progressive">HIDING PROGRESSIVELY ENHANCED MARKUP</a> section of the
<a href="../../widget/">YUI Widget landing page</a>.
.yui3-js-enabled .yui3-checkboxes-loading {
