JS单选框默认选中样式修改，为白色背景中心有黑色小圆点的样式

<style>
  /* 修改默认选中单选框的样式 */
  input[type="radio"]:checked {
    appearance: none; /* 清除默认样式 */
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 20px; /* 设置宽度和高度，可以根据需要进行调整 */
    height: 20px;
    border-radius: 50%; /* 将形状设为圆形 */
    background-color: white; /* 背景颜色为白色 */
    border: 2px solid black; /* 边框颜色为黑色 */
    position: relative;
  }
  /* 添加黑色小圆点 */
  input[type="radio"]:checked::before {
    content: ""; /* 使用伪元素创建小圆点 */
    display: block;
    width: 8px;
    height: 8px;
    background-color: black; /* 小圆点颜色为黑色 */
    border-radius: 50%; /* 形状为圆形 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 居中显示 */
  }
</style>
<input type="radio" name="gender" value="male" checked> Male
<input type="radio" name="gender" value="female"> Female