Better

在项目中，由于原生的input自带样式使用丑陋，因此一般会将input结合label使用，设置input不可见，通过点击label的方式触发input，但有个奇怪的现象，在ios浏览器上，针对checkbox类型的input并没有点击效果。在这里记录下解决办法。

背景

有如下代码：

<label class="checkbox">
    <input type="checkbox">
    <span class="name>名称</span>
</label>

有如下一段css美化input

.checkbox {
    display: inline-block;
    font-size: 24px;
    margin-right: 10px;
    margin-bottom: 20px;
    position: relative;
    font-weight: normal;

    .name {
        display: block;
        width: 190px;
        line-height: 60px;
        text-align: center;
        border-radius: 30px;
        cursor: pointer;
        background-color: #F4F4F4;
        color: #333;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    input[type='checkbox'] {
        position: absolute;
        opacity: 0;

        &:checked+.name {
            background-color: #E72714;
            color: #fff;
        }
    }
}

以上代码在android上运行一切正常，奇怪的bug再一次出现在ios上，为什么会这样，我印象中，我以前也有这么玩的情形，怎么就没出现这样的问题呢。赶紧翻以前的代码，差别竟然只是radio和checkbox的区别，之前是美化radio类型，怀着不敢相信的态度，将这里也改成radio类型，在此点击竟然有效了，因此这里郑重声明：这个问题仅针对checkbox类型

尝试办法

既然使用label包含input的方式无法触发，那就试试label的for属性吧，将input移到和label兄弟级别，同时设置一个id值，通过for属性关联指定input，基本代码如下

<label for="id"><label>
<input type="checkbox" id="id">

再次尝试问题解决了，但是有两个地方十分不满意，第一就是我要设置多余的id，第二我的场景是一个循环列表，难道我要制造那么多的id？果断不能忍啊！

终极办法

搬出stackoverflow神器哇，这么奇怪的问题，肯定不只有我碰到啊，输入标题，果然有。

采纳人数最高的是给label元素添加一个空click事件，但这对我而言无效。

第二个办法就是给span.name元素添加pointer-events: none;，啊哈哈，牛逼牛逼，完美解决！