checkboxのカスタマイズ

通常のcheckbox

#box01 input[type='checkbox'] {
	position: relative;
	width: 16px;
	height: 16px;
	border: 1px solid #000;
	vertical-align: -2px;
	accent-color: #ec0808;
}
#box01 input[type='checkbox']:checked:before {
	content: '';
	position: absolute;
	top: 1px;
	left: 4px;
	transform: rotate(50deg);
	width: 4px;
	height: 8px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
}

デフォルトのcssを無効化する

#box02 input[type='checkbox'] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

独自デザインのcssを記述する

#box03 {
	font-size: 20px;
}
#box03 input[type='checkbox'] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;

	position: relative;
	width: 30px;
	height: 30px;
	border: 2px solid #000;
	border-radius: .5em;
	vertical-align: -.6em;
	accent-color: #fff;
}
#box03 input[type='checkbox']:checked:before {
	content: '';
	position: absolute;
	top: 0px;
	left: 8px;
	transform: rotate(50deg);
	width: 8px;
	height: 16px;
	border-right: 3px solid #000;
	border-bottom: 3px solid #000;
}

独自デザインのcssを記述する

#box04 input[type='checkbox'] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	height: 18px;
	aspect-ratio: cos(30deg);
	clip-path: polygon(0 0,100% 50%,0 100%);
	background: #41956a;
	vertical-align: -.2em;
}
#box04 input[type='checkbox']:checked {
	clip-path: polygon(100% 0,0 50%,100% 100%);
}