input checkbox / radio 大变样

实际应用中，我们很少使用原生的input框，大家都嫌他丑…也因此诞生了很多美化input的插件。工作中，设计师根据不同系统设计的input框可谓各式各样，以最近做的一个项目为例，不借助插件，input + label就能轻松搞定。

<span class="has-checkbox">
    <input type="checkbox" id="checkAll" value="0" onclick="onCheckAll(this)">
    <label for="checkAll">全选</label>
</span>

// 敲黑板 划重点啦  伪类选择器:checked

//label样式
.has-checkbox label {
    position:relative;
}
.has-checkbox label::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 15px;
    width: 18px;
    height: 18px;
    background: url(../../images/icons/checkbox.png) no-repeat center / 18px;
}
.has-checkbox > input:checked + label::before {
    background: url(../../images/icons/checkbox-checked.png) no-repeat center / 18px;
}

// input框 第一种实现方式 把input弄到天涯海角 
.has-checkbox > input {
    position: absolute;
    left: -2222px;
}

// input框 第二种实现方式 把input 隐藏
.has-checkbox > input {
    visibility:hidden;
}

效果展示：

题外话:

曾几何 单纯善良的我以为 下面的方法是可以的，然而！Android 上没问题，iPhone上却有了黑框…..

// 这个方法在iPhone 上有bug！！！PC端倒是没问题
.has-checkbox > input {
        -webkit-appearance: none;
        -moz-appearance: none;
        -o-appearance: none;
        outline: none;
        border:0;
}

效果展示：