css实现自定义复选框-HTML特殊字符实现

 

 

 

主要使用HTML特殊字符实现（豆友贡献 https://www.douban.com/group/topic/28046629/），但是有兼容性问题，改进三次。

图一交互图

图二使用9744/9745，展示效果不错，使用css最少，但是vivo某一手机兼容性问题严重，显示错误（是个❌？？？，不晓得为什么）。

图二使用2713，完全不可取的写法，样式哪里有问题改哪里，导致各个手机浏览器显示都不同，七扭八歪的?。

图三也是2713，但是使用了label标记input，最终方案。

PS：当时input没有起id，label标记的是input的name，input{display：none}之后怎么点击都不能选中checkbox，但是注释display时，点击label是可以选中checkbox（这种情况就导致好久没定位到问题，我的锅?）。但是为什么标记的是name，注释display时也可以选中checkbox，i dont know。

各位，坑都填平了，去吧皮卡丘。

图一

<span class="protocal-tip">
    <span v-if="!choose" @click="isChoose" class="choose">&#9744</span>
    <span v-if="choose" @click="isChoose" class="choose">&#9745</span>
    <span class="read">已<span class="agreement" @click="jumpAutoProtocol">议</span>并</span>
</span>

data: choose: false

isChoose() {
    this.choose = !this.choose;
    this.$emit('is-auto-pay',this.choose); // 传值给父组件
}

.protocal-tip {
    font-size: 12px;
    .agreement {
        color: #397BE6;
    }
    .choose{
        font-size: 18px;
        color: #B48F4E;
     }
}

图二

<span class="protocal-tip">
    <label @click="isChoose"><input type="checkbox" name="box"></label>
    <span class="read">已<span class="agreement" @click="jumpAutoProtocol">议</span>并</span>
</span>


isChoose() {
    let check = document.getElementsByName('box');
    // check是数组，写为check[0]
    this.$emit('is-auto-pay',check[0].checked); // 传值给父组件
}

.protocal-tip {
    position: relative;
    font-size: 12px;
    .agreement {
        color: #397BE6;
    }
    .read {
        margin-left: 16px // 解决居中问题
    }
    label input {
        appearance: none; // 隐藏本来样式
        -moz-appearance: none;
        -webkit-appearance: none;
        outline: none; // 去掉蓝色outline
        position: absolute;
        width: 12px;
        height: 12px;
        border: 1px solid #B48F4E;
    }
    label input:after {
        position: absolute; // 相对于input定位
        top: -2px;
        font-size: 10px;
        content: "\2713"; // 如果选中再显示对号，input位置会变动
        color: #fff;
    }
    label input:checked:after { // 选中的input的伪元素
        color: #B48F4E;
    }
}

 图三

<span class="protocal-tip">
    <input type="checkbox" name="box" id="box">
    <label for="box" @click="isChoose"></label>
    已<span class="agreement" @click="jumpAutoProtocol">议</span>并
</span>


isChoose() {
    let check = document.getElementsByName('box');
    // 第一次点击label时，checkbox还没选中，所以先输出false，之后选中checkbox，所以传值!check[0].checked。
    this.$emit('is-auto-pay',!check[0].checked); // 传值给父组件
}

.protocal-tip {
    position: relative;
    font-size: 12px;
    .agreement {
       color: #397BE6;
    }
    label {
        display: inline-block;
        width: 12px;
        height: 12px;
        border: 1px solid #B48F4E;
    }
    input {
        display: none;
    }
    input+label:after {
        content: "\2713";
        color: #FFF;
    }
    input:checked+label:after {
        color: #B48F4E;
    }
}