修改 ＜input type=“radio“/＞默认样式

前言：

最近在公司完成一个功能模块时，需要修改input单选框的按钮样式，笔者经过多方查阅资料终于找到了解决方案，在这里分享给给需要的小伙伴

原效果展示：

解决方案：

<div>
  <label class="preparation_preparate_radio" style="margin-right: 0.08rem;">
    <input class="radio_button" type="radio" name="listeningMode" 
           value="english" checked="true">
    英文听写
  </label>
  <label class="preparation_preparate_radio">
    <input class="radio_button" type="radio" name="listeningMode" 
           value="chinese" checked="false">
    中文听写
  </label>
</div>

      .radio_button {
        appearance: none; /* 移除默认样式 */
        outline: none; /* 移除轮廓 */
        width: 0.16rem; /* 设置宽度 */
        height: 0.16rem; /* 设置高度 */
        border-radius: 50%; /* 设置为圆形 */
        background-color: white; /* 初始背景颜色为白色 */
        position: relative; /* 设置相对定位 */
        margin: 0 10px; /* 设置边距 */
        border: 1px solid #d2d2d2;
        vertical-align: middle; /* 垂直居中 */
        cursor: pointer; /* 设置鼠标指针为手型 */
      }

      .radio_button:checked {
        width: 0.17rem; /* 设置宽度 */
        height: 0.17rem; /* 设置高度 */
        background-color: #ff534d; /* 选中时中心白色 */
        border: none; /* 选中时去掉边框 */
        z-index: 2; /* 确保在最上面 */
      }

      .radio_button:checked::before {
        content: "";
        position: absolute;
        top: 50%; /* 使伪元素垂直居中 */
        left: 50%; /* 使伪元素水平居中 */
        transform: translate(-50%, -50%); /* 使伪元素水平垂直居中 */
        width: 0.05rem;
        height: 0.05rem;
        border-radius: 50%; /* 使伪元素变成圆形 */
        background-color: #ffffff; /* 外部红色 */
        z-index: 1; /* 确保伪元素在最前面 */
      }

实现效果：