radio自定义样式

话不多说先上图

   默认效果：

radio3radio4

  自定义效果：

radio1radio2

上代码

  HTML

<!DOCTYPE html>
<html>
<head>
    <title>radio test</title>
</head>
<body>
    <div style="position:relative;">
        <span style="font-weight: bold;">性别：</span>
        <input type="radio" id="radio1" class="my-radio" name="radioTest" />
        <label class="radio-label" for="radio1">男</label>
        <input type="radio" id="radio2" class="my-radio" name="radioTest" />
        <label class="radio-label" for="radio2">女</label>
        <input type="radio" id="radio3" class="my-radio" name="radioTest" />
        <label class="radio-label" for="radio3">妖</label>
    </div>
</body>
</html>

  CSS

.my-radio {
    position: relative;
    z-index: 1;
}
.my-radio:checked::after {
    content: '';
}
.my-radio::before {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #fff;
    border: 2px solid #0084FF;
}
.my-radio::after {
    position: absolute;
    top: 4px;
    left: 4px;
    background-color: #0084FF;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.radio-label {
    font-size: 14px;
    display: inline-block;
}


END.

posted @ 2020-12-19 18:30  存在过？  阅读(170)  评论(0)  编辑  收藏  举报