自定义样式，让你的 Input Radio 更美观

可以使用 CSS 来美化 input radio。

首先，隐藏原生的 radio 按钮，可以使用 'display: none;' 实现。

然后，使用 label 标签包裹 input，使得点击 label 标签时能够触发 input 的选中状态。

最后，在 label 标签中使用伪元素 '::before' 或 '::after' 来模拟自定义的 radio 图标。

以下是一个示例代码：

HTML:

<label class='radio'>
  <input type='radio' name='radio'>
  <span class='radio-icon'></span>
  选项1
</label>

<label class='radio'>
  <input type='radio' name='radio'>
  <span class='radio-icon'></span>
  选项2
</label>

CSS:

.radio {
  display: inline-block;
  margin-right: 20px;
  cursor: pointer;
}

.radio input {
  display: none;
}

.radio-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #ccc;
  margin-right: 5px;
  position: relative;
}

.radio input:checked + .radio-icon::before {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #007bff;
}

.radio:hover .radio-icon {
  border-color: #007bff;
}

在上面的代码中，我们使用了一个圆形的伪元素 '::before' 来模拟 radio 的选中状态，并使用了 hover 效果来提示用户。你可以根据需要修改样式，美化你的 input radio。