1st solution to the Cross Browser Positioning of a Checkbox With Label

This is 1 solution to the Cross Browser Positioning of a Checkbox With Label, this relies on the native checkbox of the browser, contained in a positionable div, which has been aligned with our label text.

by childerskc

HTML

<label><div class="checkbox"><input type="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 */

/* Stretch out our checkbox and adjust its position a bit */
input[type=checkbox] {
   margin:0px;padding:0px;
   margin-top:-2px;
   margin-left:-2px;
   width:14px;
   height:14px;
}

/* 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;
}

/* Container for Cross Browser Positioning */
div.checkbox {
   position: relative;
   width: 10px;
   height: 10px;
   line-height: 10px;
   display: inline-block;
   overflow: hidden;
   border:1px solid #BBB;
}

JavaScript

/*
This is 1 solution to the Cross Browser Positioning of a Checkbox With Label, this relies on the native checkbox of the browser, contained in a positionable div, which has been aligned with our label text.
*/