改radio样式

span包含input，将input（radio）标签display none，通过label元素的机制，将点击事件传递给radio，radio虽然隐藏但是仍然会改变状态，:checked和+（相邻兄弟选择器）设置样式

 

.radio-label {
            width: 120px;
            height: 30px;
            display: inline-block;
            line-height: 30px;
        }
        
        .radio-input {
            display: none;
        }
        
        .radio-span {
            display: inline-block;
            width: 18px;
            height: 18px;
            border: 1px solid #c0c0c0;
            position: relative;
            border-radius: 100%;
            top: 3px;
        }
        
        .radio-input:checked+.radio-span:before {
            background-color: TEAL;
            content: '';
            width: 12px;
            height: 12px;
            display: inline-block;
            border-radius: 100%;
            position: absolute;
            top: 3px;
            left: 3px;
        }

<label class="radio-label">
        <input class="radio-input" type="radio" name="w" value="">
        <span class="radio-span"></span> 苹果
</label>

 

转载于:https://www.cnblogs.com/miaolq/p/6138372.html