Custom Checkbox with CSS appearance Property

Checkboxes can be customized using the CSS appearance property. No changes to the existing HTML markup is required.

input[type="checkbox"] {
	appearance: none;
	/* background, border etc to customize */ 
}

input[type="checkbox"]:checked {
	/* checked state CSS */ 
}

By setting appearance: none, all browser styling is removed from the checkbox. Other CSS properties like background, border etc can be used to customize the checkbox. The :checked CSS selector can be used to style the checkbox in a "checked" state.

Example

HTML & CSS :

<input type="checkbox" value="Apple" />Apple
<input type="checkbox" value="Orange" />Orange

input[type="checkbox"] {
	appearance: none;
	width: 20px;
	height: 20px;
	border: 2px solid #555555;
	background-clip: content-box;
	padding: 3px;
}

input[type="checkbox"]:checked {
	background-color: #555555;
}

Browser Compatibility

appearance: none is supported in all browsers.