Custom Checkbox with CSS appearance Property

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.


Which fruits do you like :


<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.

Related Tutorials
Hide Dropdown Arrow for Select Input with CSS appearance
Custom Radio Buttons with CSS appearance Property
Loading Comments