关于美化表单

一般来说我们美化表单用纯CSS就可以实现了，但是，在手机端有一些问题的(我在用MUI做混合APP的时候发现用label标签包着input会错乱);所以，我只能补充一点JS代码了;下面是例子

HTML

<div class="box">
    <input type="checkbox" name="a[]" id="" value="1" />
    <span class="iconfont">这个是文字1</span>
</div>
<div class="box">
    <input type="checkbox" name="a[]" id="" value="2" />
    <span class="iconfont"></span>
</div>

这里做一下说明：<span class="iconfont"></span>这里的iconfont类，我是用了阿里巴巴的矢量库里图标,因为我需要在点击box的时候，右下角出现一个√的图标，如下图：

CSS

.box{
    width: 100px;
    height: 100px;
    margin: 30px;
    background: #E3E3E3;
    position: relative;
    overflow: hidden;
}
.box span{
    display: block;
    width: 100%;
    height: 100%;
    line-height: 100px;
    background: #1A84FF;
    color: #fff;
    text-align: center;
}
.box input{
    position: absolute;
    top: -20px;
    left: 0;
}
.box input:checked ~ span{
    background: red;
}
.box input:checked ~ span:before{
    content: "\e67b";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 30px;
    height: 30px;
    background: #EC971F;
    line-height: 30px;
}

关于css的部分解释：.box input:checked ~ span:before这里注意content的内容，我是在我的字体图标样式表里查询到的 .icon-gou:before { content: "\e67b"; }所以我这里做了一下样式上的更改,但是这里必须要配合icofont类来使用的；至于具体怎么使用阿里巴巴的矢量图标库可以去它们的官网里看

JS

mui(".box").each(function(){
    this.addEventListener("tap",function(){
        var inp = this.children[0]
        inp.checked = !inp.checked;
    })
})

inp.checked = !inp.checked;这里利用它们自身的属性值来取反，就能模拟出反选的效果