Topcoat Checkbox Tests

checkbox-css.css

/* Dual Label */
.dual-label {
  width: 70px;
  display: inline-block;
}
 
.checkbox-image {
    display: inline-block;
    width: 35px;
    height: 31px;
    background: url("/../img/sprites.png") left -33px no-repeat;
	vertical-align: middle;
	font-size: 18px;
	margin: 0 15px 2px 0;
}
 
input[type="checkbox"] + label {
	display: inline-block;
	overflow: hidden;
	margin: 10px 0;
}
 
input[type="checkbox"]:checked + label .checkbox-image{
	background: url("/../img/sprites.png") left top no-repeat;
}
 
 
/* Float Right */
.float-right {
	width: 145px;
	display: inline-block;	
}
 
.checkbox-image {
    display: inline-block;
    width: 35px;
    height: 31px;
    background: url("/../img/sprites.png") left -33px no-repeat;
	margin: 0 15px 2px 0;
	float: right;
	position: relative;
	top: -5px;
}
 
input[type="checkbox"]:checked + label .checkbox-image{
	background: url("/../img/sprites.png") left top no-repeat;
}
 
 
 
/* Float Left */
.checkbox-image {
    display: inline-block;
    width: 35px;
    height: 31px;
    background: url("/../img/sprites.png") left -33px no-repeat;
	vertical-align: middle;
	font-size: 18px;
	margin: 0 15px 2px 0;
}
 
input[type="checkbox"] + label {
	display: inline-block;
	overflow: hidden;
	margin: 10px 0;
}
 
input[type="checkbox"]:checked + label .checkbox-image{
	background: url("/../img/sprites.png") left top no-repeat;
}

checkbox-html.html

<!-- dual label -->
<p>
  <label for="checkbox-1" class="dual-label">Everyone</label>
  <input type="checkbox" id="checkbox-1" />
	<label for="checkbox-1"><i class="checkbox-image"></i></label>
		<br/>
	<label for="checkbox-1" class="dual-label">Short</label>
	<input type="checkbox" id="checkbox-1" />
	<label for="checkbox-1"><i class="checkbox-image"></i></label>
</p>
 
 
<!-- :after label -->
<p>
	<input type="checkbox" id="checkbox-3" />
	<label for="checkbox-3" class="after-label">Enemies</label> 
		<br />
	<input type="checkbox" id="checkbox-4" />
	<label for="checkbox-4" class="after-label">short</label>
</p>
 
 
<!-- float right -->
<p>
	<input type="checkbox" id="checkbox-2" />
	<label class="float-right" for="checkbox-2">Enemies<i class="checkbox-image"></i></label>
		<br />
	<input type="checkbox" id="checkbox-4" />
	<label class="float-right" for="checkbox-4">Enemies<i class="checkbox-image"></i></label>
</p>
 
 
<!-- lefthand side -->
<p>
	<input type="checkbox" id="checkbox-2" />
	<label for="checkbox-2"><i class="checkbox-image"></i>Enemies</label>
	<br />
	<input type="checkbox" id="checkbox-3" />
	<label for="checkbox-3"><i class="checkbox-image"></i>Short</label>
</p>