将html的radio单选框自定义样式为正方形和对号

要为HTML中的radio单选框自定义样式，并使其显示为正方形和对号，您可以使用CSS来隐藏原生的单选按钮，并使用伪元素显示自定义的内容。以下是一个简单的例子：

HTML:

<label class="radio-container">
  <input type="radio" name="radio-btn" checked>
  <span class="checkmark"></span>
</label>

CSS:

/* 隐藏原生的单选按钮 */
.radio-container input[type="radio"] {
  display: none;
}
 
/* 创建一个正方形的容器 */
.radio-container {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 50%;
  position: relative;
}
 
/* 当单选按钮被选中时，显示一个对号 */
.radio-container input[type="radio"]:checked + .checkmark {
  position: absolute;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  left: 4px;
  top: 4px;
}
 
/* 对号的样式 */
.checkmark::after {
  content: '✔';
  display: none;
}
 
/* 当单选按钮被选中时，显示对号的伪元素 */
.radio-container input[type="radio"]:checked + .checkmark::after {
  display: block;
}

在这个例子中，.radio-container 类用于创建一个正方形的容器，并且使用伪元素 ::after 来显示对号。当单选按钮被选中时，对号会显示出来。通过隐藏原生的单选按钮并为其创建自定义的可视化效果，您可以为radio按钮提供一个完全不同的外观和感觉。