input单选样式修改

html结构

<input class="m_input" type="radio" id="male" checked="checked" name="sex"><label for="male">男</label>
<input class="m_input" type="radio" id="female" name="sex"><label for="female">女</label>
<input class="m_input" type="radio" id="Unspecified" name="sex"><label for="Unspecified">未指定</label>

css代码

input[type="radio"] + label::before {
    content: "\a0"; /*不换行空格*/
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 1px solid #d5d5d5;
    box-sizing: border-box;
    background-color: #f3f3f3;
    margin-right: 7px;
    position: relative;
    top: 11px;
}

input[type="radio"]:checked + label::before {
    background-color: #65748e;
    background-clip: content-box;
    padding: 2px;
}

input[type="radio"] {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}

效果图