【css】：修改radio单选框的样式

<div class="testradio" v-show="finishWork !=='POS机'">
     <input id="item1" type="radio" name="workType" v-model="info.businessTypes" value="1" />
         <label for="item1"></label>
         <span>POS机</span>
</div>

<div class="testradio" v-show="finishWork !=='条码'">
     <input id="item2" type="radio" name="workType" v-model="info.businessTypes" value="2" />
     <label for="item2"></label>
     <span>条码</span>
</div>

css样式：

.testradio {
    position: relative;
    width: 150px;
    padding-left: 20px;
    input[type="radio"] {
        width: 16px;
        height: 16px;
        opacity: 0;
    }
    label {
        position: absolute;
        left: 0;
        top: 2px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background-color: #D8D8D8;
    }

    /*设置选中的input的样式 + 是兄弟选择器,获取选中后的label元素*/
    input:checked + label {
        background-color: #D8D8D8;
        border: 1px solid #D8D8D8;
    }

    input:checked + label::after {
        position: absolute;
        content: "";
        width: 8px;
        height: 8px;
        top: 3px;
        left: 3px;
        background: #346EFD;
        border-radius: 50%;
    }
}