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;}

效果展示：