2nd solution to the Cross Browser Positioning of a Checkbox With Label

This is the 2nd solution to the Cross Browser Positioning of a Checkbox With Label, this relies on a sprite image of our checkbox checked and unchecked, contained before a positionable div, which has been aligned with our label text. It then uses the CSS "Checkbox Toggle Hack" to toggle the state of our positioned div.

by childerskc

HTML

<label><input type="checkbox" /><div class="checkbox"></div>Label text</label>

CSS

html, body {margin:0px;padding:0px;}/* So we can see how cross browser it is when screenshot for accuracy */

/* Get Rid Of The Actual Checkbox */
input[type=checkbox] {
   position: absolute;
   display:none;
   visibility:hidden;
}

/* A Little Non-Selectable Magic */
label, div.checkbox {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Default, Non Checked State */
div.checkbox {
   background-image: url('http://www.visual-optics.com/checkbox.png');
   width: 14px;
   height: 14px;
   display: inline-block;
   background:green
}

/* Checkbox Toggled Hack with Checked State as our Background Position */
input[type=checkbox]:checked ~ div.checkbox {
   background-image: url('http://www.visual-optics.com/checkbox.png');
   background-position: -14px 0px;
   background:orange
}

JavaScript

/*
This is the 2nd solution to the Cross Browser Positioning of a Checkbox With Label, this relies on a sprite image of our checkbox checked and unchecked, contained before a positionable div, which has been aligned with our label text. It then uses the CSS "Checkbox Toggle Hack" to toggle the state of our positioned div.
*/