修改radio样式

radio默认样式

以谷歌浏览器为例

    <div class="box">
        <input class="radio" type="radio" name="sex" />男
        <input class="radio" type="radio" name="sex" />女
        <input class="radio" type="radio" name="sex" />保密
    </div>

自带默认margin: 3px 3px 0px 5px

默认框框样式

       width: 10px;
       height: 10px;
       border: 1px solid rgb(118, 118, 118);
       border-radius: 50%;
       box-sizing: border-box;

选中时的样式

修改radio默认样式

可以设置尺寸和边距

      input[type="radio"] {
    
        width: 20px;
        height: 20px;
        margin: 0;
      }

使用appearance: none隐藏默认radio的框框，重写框框样式

原理：通过绝对定位覆盖原多选框

      input[type="radio"] {
    
        width: 20px;
        height: 20px;
        margin: 0 4px 0 0;
        appearance: none;
        position: relative;
      }

示例一：

      /** 未被选中的样式*/
      input[type="radio"]::before {
    
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        background: #fff;
        width: 100%;
        height: 100%;
        border: 1px solid #d9d9d9;
        border-radius: 4px;
      }
      /** 选中的样式 */
      input[type="radio"]:checked::before {
    
        content: "\2713";   /* 2713表示勾勾* */
        background-color: #fff;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 1px solid #7d7d7d;
        border-radius: 4px;
        color: #7d7d7d;
        font-size: 20px;
        font-weight: bold;
        text-align: center;
        line-height: 20px;
      }

效果图：

示例二：

      /** 未被选中的样式*/
      input[type="radio"] {
    
        width: 20px;
        height: 20px;
        margin: 0 4px 0 0;
        appearance: none;
        position: relative;
        background: wheat;
        border-radius: 50%;
      }
      /** 选中的样式*/
      input[type="radio"]:checked::before {
    
        content: "";
        background: orange;
        position: absolute;
        top: 25%;
        left: 25%;
        width: 50%;
        height: 50%;
        border: none;
        border-radius: 50%;
      }

效果图：