Custom radio buttons & checkboxes with CSS

dabblet.css

/**
 * Custom radio buttons & checkboxes with CSS
 * http://lea.verou.me/css3-secrets/#slide31
 */

/**
 * These styles are for this dabblet only
 */
body {
	color: #111;
	font: 18px sans-serif;
}

/**
 * Hide default checkbox and radio button elements
 * https://developer.mozilla.org/en-US/docs/Web/CSS/clip
 */
[type=radio],
[type=checkbox] {
	position: absolute;
	clip: rect(0 0 0 0);
}


label {
	position: relative;
	cursor: pointer;
}

[disabled] + label {
	cursor: default;
}

/**
 * Custom radio button as pseudo-element;
 * display: inline-block makes it flow with label text
 * set width, height, line-height and font-size
 */
[type=radio] + label:before {
	vertical-align: middle;
	text-align:center;
	content: '';
	width: 18px;
	height: 18px;
	line-height:18px;
	font-size: 18px;
	margin-right: 5px;
	background-color: grey;
	display:inline-block;
	border-radius: 50%;
	box-shadow: inset 0 2px 2px 0 black;
}

/**
 * Insert ASCII content on checked elements
 */
[type=radio]:checked + label:before {
	content: "\25CF";
}

/**
 * Styling disabled inputs
 */
[type=radio][disabled] + label:before {
 	box-shadow: none;
 	background-color: lightgrey;
}

/**
 * Checkboxes are styled pretty much like radio buttons! 
 */
[type=checkbox] + label:before {
	vertical-align: middle;
	text-align:center;
	content: '';
	width: 18px;
	height: 18px;
	line-height:18px;
	font-size: 18px;
	margin-right: 5px;
	background-color: lightgrey;
	display:inline-block;
	border-radius: 3px;
	border: 2px solid black;
}

[type=checkbox]:checked + label:before {
	content: "\2717";
}

[type=checkbox][disabled] + label:before {
 	border-color: lightgrey;
 	background-color: white;
}

dabblet.html

<p>Custom radio buttons</p>
<input type="radio" id="ropt1" name="radio">
<label for="ropt1">Option 1</label>
<input type="radio" id="ropt2" name="radio">
<label for="ropt2">Option 2</label>
<input type="radio" id="ropt3" name="radio" disabled>
<label for="ropt3">Option 3 (disabled)</label>
<p>Custom checkboxes</p>
<input type="checkbox" id="copt1" name="checkbox">
<label for="copt1">Option 1</label>
<input type="checkbox" id="copt2" name="checkbox">
<label for="copt2">Option 2</label>
<input type="checkbox" id="copt2" name="checkbox" disabled>
<label for="copt2">Option 3 (disabled)</label>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}