纯css修改radio样式寻技术

<!DOCTYPE html>
<html>
<head>
    <title>radio demo</title>
    <style>
        div,ul,li {
            padding: 0;
            margin: 0;
        }
        li {
            position: relative;
            height: 30px;
            margin-bottom: 10px;
        }
        .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 blue;
        }
        .my-radio::after {
            position: absolute;
            top: 4px;
            left: 4px;
            background-color: blue;
            width: 8px;
            height: 8px;
            border-radius: 50%;
        }
        .radio-label {
            display: inline-block;
            border: 1px solid blue;
            width: 100px;
            height: 30px;
            position: absolute;
            left: 0;
            top: 0;
        }
        .my-radio:checked + .radio-label {
            border-color: red;
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <p style="color: red;">注：这里如果radio加id，label标签for属性指向id则可以点击label是radio触发</p>
    <p style="color: red;">如果不通过id来关联，则是需要直接点击radio才产生效果</p>
    <ul>
        <li>
            <input type="radio"  />
            <label class="radio-label" for="radio1"></label>
        </li>
        <li>
            <input type="radio"  />
            <label class="radio-label" for="radio2"></label>
        </li>
        <li>
            <input type="radio"  />
            <label class="radio-label" for="radio3"></label>
        </li>
        <li>
            <input type="radio"  />
            <label class="radio-label" for="radio4"></label>
        </li>
        <li>
            <input type="radio"  />
            <label class="radio-label" for="radio5"></label>
        </li>
    </ul>
</body>
</html>

　　效果如下：

radio demo

注：这里如果radio加id，label标签for属性指向id则可以点击label是radio触发

如果不通过id来关联，则是需要直接点击radio才产生效果