在HTML和CSS中，默认的<input type="checkbox">元素通常呈现为一个小方块。要将复选框变为圆形，你需要使用CSS来自定义其样式。这通常涉及到隐藏默认的复选框并使用伪元素（如::before或::after）来创建一个新的圆形外观。
以下是一个基本的示例，展示了如何将复选框变为圆形：
HTML:
<label class="checkbox-custom"> <input type="checkbox" /> <span class="checkmark"></span> 复选框标签 </label>
CSS：
.checkbox-custom { position: relative; display: inline-block; padding-left: 30px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .checkbox-custom input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } .checkbox-custom .checkmark { position: absolute; top: 0; left: 0; height: 20px; width: 20px; background-color: #eee; border-radius: 50%; } .checkbox-custom input:checked ~ .checkmark { background-color: #2196F3; } .checkbox-custom .checkmark:after { content: ""; position: absolute; display: none; } .checkbox-custom input:checked ~ .checkmark:after { display: block; } /* 这里是创建一个小的白色圆形来表示选中的复选框 */ .checkbox-custom .checkmark:after { top: 50%; left: 50%; width: 8px; height: 8px; border-radius: 50%; background: white; transform: translate(-50%, -50%); }
在这个示例中，.checkbox-custom类包装了复选框和相关的标签。复选框本身被设置为绝对定位，并且其opacity被设置为0，以便隐藏它。然后，我们使用.checkmark类来创建一个圆形的背景，并使用::after伪元素来在复选框被选中时显示一个小的白色圆形。
