html将复选框变为圆形样例

要将HTML中的复选框变为圆形样式，可以使用CSS对原生复选框进行样式隐藏，然后利用标签的伪类:checked来显示一个自定义的圆形图标，并使用背景图片或者SVG图形。以下是一个简单的例子：

HTML:

<label class="checkbox-circle">
  <input type="checkbox" id="checkbox">
  <span></span>
</label>

CSS:

/* 隐藏原生复选框 */
.checkbox-circle input[type="checkbox"] {
  display: none;
}
 
/* 当复选框被选中时，显示一个圆形的背景 */
.checkbox-circle input[type="checkbox"]:checked + span {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: blue;
  position: relative;
}
 
/* 未选中时，显示一个空心圆 */
.checkbox-circle span {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 50%;
  position: relative;
}

在这个例子中，当复选框被选中时，<span>标签会显示为蓝色背景的圆形，未被选中时，显示为带有边框的空心圆形。通过CSS，你可以自定义圆形的大小、颜色和其他样式。