给radio、checkbox按钮重新做样式

通常UI给出的按钮样式需要自己来写，如图

单选按钮选中与未选中状态样式

给的新样式一般都用选择器:before覆盖之前的样式，在此基础上再编写新的样式。

radio样式编写借鉴了 自定义input[type="radio"]的样式这篇文章，写的很好，非常详细，大家可以看一下。

checkbox是自己写的，css稍微有些不严谨，但效果实现了，稍微有一小点儿瑕疵，如果有更好更简单的方法，欢迎大家踊跃发言。

1.首先将之前的样式抹掉，利用定位将默认的框覆盖住，一定要有背景颜色

input[type='checkbox']:before{
    content: "";
    position: absolute;
    width: 17px;
    height: 17px;
    top: 2px;
    left: 78px;
    bottom: 0;
    background: #fff;
    box-sizing: border-box;
}

2.然后给checkbox新的样式

input[type='checkbox']{
    width: 15px;
    height: 16px;
    border: 1px solid #e3e3e3;
    margin-left: 80px;
}

3.最后将选中状态的背景替换一下

 input[type='checkbox']:checked::before {
    width: 17px;
    height: 17px;
    background: url(../img/duigou.jpg) no-repeat center;
    border: none;
}

有两点需要注意：①background用到的图片背景颜色不能为透明，UI切图的时候我让她连边框一起切到一张图了；②步骤2的width加上外边框是16px，比设定的17px小，这是因为如果二者正好是17px的话会导致出现这种情况

image.png

右侧边框处出现了默认checkbox的样式，所以需要步骤2的width宽度小一些，另外步骤1里的top,left值可能也需要微调，才能实现完美覆盖，如果单纯使用定位来覆盖，可能效果不太完美，这一点就稍微有点麻烦。