radio 选中不选中样式 2种方式

效果

代码:

                       <div class="radio-l">
                            <input type="radio" name="ll" value="open" id="open" checked>
                            <label for="open">公开</label>
                            <input type="radio" name="ll" value="no" id="no">
                            <label for="no" class="ml30">未公开</label>
                        </div>

.radio-l{
    label{
        position: relative;
        top: 0px;
        // color: #B7BABB;
        line-height: 16px;
    }
    input[type="radio"]{
        display: none;
    }
    input[type='radio']+label:before{
        margin-top: -2px;
        content: '';
        display: inline-block;
        width: 18px;
        height: 18px;
        margin-right: 6px;
        border-radius: 100%;
        vertical-align: middle;
        border: 1px solid #E4E4E4;
        background: #FFFFFF;
    }
    
    input[type='radio']:checked+label:before{
        background-image: url('~/static/images/checked3.png');
        background-position: center center;
        background-size: 18px 18px; 
    }
}

方式二：纯css代码（效果同上）

代码：

                        <ul class="radio-ch ub-f1 ub">
                            <li v-for="(item,index) in typeCh" :key="index" class="po-re">
                                <input :id="`name_${index}`" type="radio"  v-model="params.isOpen"  :value="item.type" />
                                <label :for="`name_${index}`"></label>
                                <span>{{item.name}}</span>
                            </li>
                        </ul>

  .radio-ch{
        li {
            margin-bottom: 20px;
            position: relative;
            width:50%;
            margin-right:50px;
            input[type="radio"] {
                width: 0;
                height: 0;
                opacity: 0;
            }
            label {
                position: absolute;
                left: 5px;
                top: 6px;
                width: 30px;
                height: 30px;
                border-radius: 50%;
                border: 1px solid #999;
            }
            input:checked + label {
                background-color:$baseColor;
                border: 1px solid $baseColor;
            }
            span {
                font-size: 26px;
                display:inline-block;
                width:100px;
                position: absolute;
                top: 2px;
                left: 55px;
            }
            input:checked + label::after {
                position: absolute;
                content: '';
                width: 10px;
                height: 16px;
                top: 5px;
                left: 10px;
                border: 1px solid #fff;
                border-top: none;
                border-left: none;
                transform: rotate(45deg);
            }
        }
    }