Custom Checkbox with CSS appearance Property

css
Published on January 22, 2021

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

Which fruits do you like :
Apple
Orange

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.

In this Tutorial
    Comments
    Loading Comments