html给radio添加图片,使用纯CSS自定义radio(单选框)和checkbox（多选框）的样式

radio和checkbox由于不同的浏览器显示的样式不一致，因此我们需要自定义radio(单选框)和checkbox(多选框)的样式。基本原理就是贱radio和checkbox的自定义样式设置成图片背景，然后通过js或者jQuery给包裹radio和checkbox的label根据点击效果添加和删除类别，从而达到自定义radio和checkbox的假象。

下面直接上代码：

HTML代码

需要如下的HTML代码

Checkbox1

Checkbox2

Radio1

Radio2

Radio3

JavaScript代码

上面的代码是控制css样式的js代码，采用的是jQuery，所以一定要先引入jQuery文件。

CSS代码

最后的CSS代码，如下所示：

* { margin: 0; padding: 0; }

body {

font: 14px/18px 'HelveticaNeue-Light', 'Helvetica Neue', Arial, Helvetica, sans-serif;

color: #fff;

background: #333;

}

a:hover,

a:active {

outline: none;

}

/*form style*/

form {

width: 300px;

padding: 18px 20px 0;

margin:20px auto;

background-color: