A Pen by Tiffany Brown.

Fancy-checkboxes.markdown

Fancy checkboxes

One of many ways in which to achieve fancy checkboxes. Can do the same for radio buttons by changing the input type as needed and updating styles.

A Pen by Tiffany Brown on CodePen.

License.

index.html

<form>
	<p class="cb">
		<input type="checkbox" name="list" id="lista" value="a" checked>
		<label for="lista">This is a list item</label>
	</p>
</form> 

style.css

.cb {
	position:relative;
	clear:both;
	background: #0c9;
}			
.cb input[type=checkbox], .cb label {
	position: absolute;
}
.cb label {
	padding: .5em 0 .5em 3em;
	z-index: 2;
	cursor: pointer;
}
.cb input[type=checkbox] {
	-webkit-appearance: none;
	-moz-appearance: none;
		appearance: none;
	width: 2em;
	height: 2em;
	border: 0;
	display: none;
	opacity: 1;	
}
.cb:before {
	content:'';
	position:absolute;
	width: 1.5em;
	height: 1.5em;
	top: 0;
	left:0;
	z-index: 1;
	background: #ccc;
	vertical-align: bottom;
}

.cb input[type=checkbox]:checked + label{
	background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22-1.5%2045%20180%20180%22%20enable-background%3D%22new%20-1.5%2045%20180%20180%22%3E%3Cpath%20fill%3D%22%23c09%22%20d%3D%22M.6%20143.54l28.3-28.4%2034%2034%2085.1-85.1%2028.4%2028.4-113.4%20113.5-62.4-62.4z%22%2F%3E%3C%2Fsvg%3E") 0 0 no-repeat;
	background-size: 24px auto;
}