表单自定义是否单选按钮

如果您想要自定义单选按钮的外观，可以使用 CSS 样式来修改它们的样式。以下是一个示例：

<style>
  /* 隐藏原始单选按钮 */
  input[type="radio"] {
    display: none;
  }
  
  /* 自定义单选按钮的外观 */
  .custom-radio {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #ccc;
    position: relative;
    margin-right: 10px;
  }
  
  /* 自定义单选按钮被选中时的样式 */
  .custom-radio::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #ccc;
    opacity: 0;
    transition: opacity 0.2s;
  }
  
  /* 当原始单选按钮被选中时，使用上面的样式来渲染自定义单选按钮 */
  input[type="radio"]:checked + .custom-radio::after {
    opacity: 1;
  }
</style>

<form>
  <label>
    <input type="radio" name="gender" value="male">
    <span class="custom-radio"></span>
    Male
  </label>
  
  <label>
    <input type="radio" name="gender" value="female">
    <span class="custom-radio"></span>
    Female
  </label>
  
  <label>
    <input type="radio" name="gender" value="other">
    <span class="custom-radio"></span>
    Other
  </label>
</form>

在上面的示例中，我们首先使用 CSS 隐藏了原始单选按钮，然后为每个单选按钮创建了一个自定义的外观。我们还定义了一个伪元素（`:after`），用于在选中单选按钮时显示一个小圆点。

要使用自定义样式的单选按钮，您需要将原始单选按钮与自定义样式相关联。在上面的示例中，我们使用了 `<label>` 元素来实现这一点。当用户单击 `<label>` 元素时，将自动选中与其中的 `<input>` 元素相关联的单选按钮。