表单美化

改变checkbox样式

1.按钮

<li>
    <input type="checkbox" id="id" name="sectors[]"
        value="id">
    <label for="id">ABC</label>
</li>

input[type=checkbox] {
    position: absolute;
    clip:rect(0,0,0,0);
}

input[type=checkbox] + label {
    //样式
}
input[type=checkbox]:checked + label,
input[type=checkbox]:active + label{
    //选中后样式
}

2.改变选中框样式

input[type=checkbox]{
    position: absolute;
    clip:rect(0,0,0,0);
}

input[type=checkbox] + label::before{
    content:'\a0'; //空格
    //样式
}

input[tyoe=checkbox]:check + label::before{
    content:'\2713',
    //选中后样式
}

去除Chrome浏览器历史记录的黄色

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}

去除IOS输入框默认样式

  -webkit-appearance: none;
  border-radius: 0;