label和input标签在兼容模式下 不能关联？解决方案

我是用vue项目做的表单，其中单选、多选是自己实现的，但是label标签和input关联，在兼容模式下有问题，于是解决了一下，做一下笔记方便以后查阅。

源码：

<div v-for="item in roleList" :key="item.id" class="col col-xs-12">
                                        <label>
                                            <input v-show="false" type="radio" name="role" :value="item.id" :checked="postObj.roleId==item.id" @click="inputChange('roleId',item)" />
                                            <div class="imgBox">
                                                <span class="labelShadow"></span>
                                                <img v-show="postObj.roleId==item.id" src="../assets/img/radioChecked.png" alt="选中">
                                                <img v-show="postObj.roleId!=item.id" src="../assets/img/radioNoCheck.png" alt="未选中">
                                            </div>
                                            
                                            {{ item.name }}{{ item.registFee==0?'':'['+item.registFee }}{{item.registFee==0?'':'元]'}}
                                        </label>
                                    </div>

 

 上面的图片，在兼容模式下，点击前方小圆点（自己用的图片），无效，选项不会被选中

解决办法在css中，

.imgBox{
        width:16px;
        height:16px;
        display:inline-block;
        position: relative;
    }
    .imgBox .labelShadow{
        position:absolute;
        left:0;
        top:0;
        bottom:0;
        right:0;
        z-index: 2;
    }
    .imgBox img{
        width:100%;
        height:100%;
    }

进过调试发现，点击label标签中的文字时能够触发input的，于是想着用一个span标签将，按钮图片覆盖，这样点击图片时，就会触发input了。

。