在HTML中自定义单选按钮并删除可选圆圈

<label>
  <input type="radio" name="custom-radio" value="option1">
  Option 1
</label>
<label>
  <input type="radio" name="custom-radio" value="option2">
  Option 2
</label>

<style>
  /* 隐藏默认的可选圆圈 */
  input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #ccc;
    outline: none;
  }

  /* 自定义单选按钮样式 */
  input[type="radio"]:checked {
    background-color: #007bff;
    border-color: #007bff;
  }
</style>