BFE.devAI解答 - CSS 问题
6. 自定义checkbox样式

.my-checkbox input[type="checkbox"] { display: none; }

.my-checkbox span:before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; border: 1px solid gray; background-color: gray; }

.my-checkbox input[type="checkbox"]:checked + span:before { background-color: green; border-color: green; }

.my-checkbox span { display: inline-block; vertical-align: middle; cursor: pointer; }

解释：首先将原生的checkbox隐藏掉，然后给label添加样式美化。使用:before伪元素来添加圆点，根据需求设置其颜色、大小、边框等样式，选中状态下修改背景色和边框颜色，最后给label内的span元素添加样式以使之与圆点垂直对齐，鼠标hover时添加手型光标以示可选。