custom style checkboxes

dabblet.css

.list  {
	list-style: none;
	border: 1px solid blue;
	width: 110px;
}
.elem {
	display: inline-block;
	border: 1px solid black;
	width: 100px;
}
.elem input[type='checkbox'] {
	
    opacity: 0;
    
    float: left;
    width: 0;
}
.elem input[type='checkbox'] + label {
	margin: 0px;    clear: none;
	width: 100%;

    
    /* Left padding makes room for image */
    padding: 0 30px 0 30px;

    /* Make look clickable because they are */
    cursor: pointer;
    
    background: red left center no-repeat; 
}
.elem input[type='checkbox']:checked + label {
	background: yellow left center no-repeat; 

}

dabblet.html

<div class="list">
	<span class="elem">
		<input id="cb1" type="checkbox">
		<label for="cb1">bbb</lable>

	</span>
	<span class="elem">		
		<input id="cb2" type="checkbox">
		<label for="cb2">qqq</lable>		
	</span>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}