html的 input单选框圆形改成正方形选中为对号

可以通过CSS样式来实现将单选框圆形改成正方形，并且将选中状态改成对号的效果。具体实现方法如下：

HTML代码：

<label>
  <input type="radio" name="option" value="option1">
  <span class="checkmark"></span>
  Option 1
</label>
<label>
  <input type="radio" name="option" value="option2">
  <span class="checkmark"></span>
  Option 2
</label>

CSS样式：

input[type="radio"] {
  display: none;
}

.checkmark {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;
  border-radius: 3px;
  position: relative;
}

.checkmark:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 10px;
  height: 10px;
  background-color: #333;
  border-radius: 2px;
}

input[type="radio"]:checked + .checkmark:before {
  transform: translate(-50%, -50%) scale(1);
}

在上述CSS样式中，我们首先将单选框的样式设置为不可见，然后通过一个带有边框和圆角的 span 元素来模拟单选框的外观。在该 span 元素中通过伪元素 :before 来添加选中状态下的对号，并将其初始状态设置为不可见，选中后通过CSS选择器 input[type="radio"]:checked + .checkmark:before 来将其显示出来。