css修改input中单选框的方法

css修改input中单选框的方法

html代码

 <li>
                    <input type="radio" name="hero-name" id="free">
                    <label for="free" class="text-label">
                        免费英雄
                   </label>
                </li>

css代码：

 li input[type="radio"] {
            width: 20px;
            height: 20px;
            display: none;
        }
        /* 未选中时lable的状态 */
        
        input[type="radio"]+label::before {
            content: '';
            display: inline-block;
            vertical-align: middle;
            width: 20px;
            height: 20px;
            margin-right: 5px;
            border-radius: 50%;
            margin-bottom: 4px;
            box-sizing: border-box;
            border: 1px solid #bfcbd9;
            background-color: #fff;
        }
        /* 被选中的单选框样式  给空心圆圈中间加上背景色*/
        
        input[type="radio"]:checked+label::before {
            background-color: #178fe6;
            background-clip: content-box;
            /* 规定背景颜色的绘制区域 */
            padding: 3px;
        }

效果图：