HTML:

<input type="checkbox" id="myCheckbox" class="custom-checkbox" /> 
<label for="myCheckbox" class="checkbox-label">自定义复选框</label>

CSS:

/* 隐藏默认复选框 */.custom-checkbox { -webkit-appearance: none;/* Webkit浏览器 */ -moz-appearance: none; 
/* Mozilla浏览器 */ appearance: none; border: 2px solid #000;/* 自定义边框样式 */ width: 20px; 
/* 自定义宽度 */ height: 20px; /* 自定义高度 */ } 
/* 未选中状态的样式 */ .custom-checkbox:not(:checked) { background-color: #fff; /* 自定义背景色 */ }/* 选中状态的样式 */ .custom-checkbox:checked { background-color: #000; /* 自定义背景色 */ }

在这个例子中，我们使用了 -webkit-appearance、-moz-appearance 和 appearance 属性来覆盖默认的复选框外观。这些属性允许你重置浏览器的默认外观，以便你可以自定义样式。

然后，我们定义了.custom-checkbox类的样式，包括边框、宽度、高度等。在选中和未选中状态下，我们分别定义了不同的背景颜色，以便在复选框被选中或取消选中时改变其外观。

需要注意的是，不同浏览器对 -webkit-appearance、-moz-appearance 和 appearance 的支持可能有所不同。你可能需要根据实际情况进行调整，以确保在各种浏览器下都能正确显示自定义的复选框样式