html表单复选框样式,美化表单——自定义checkbox和radio样式

如果你对本站比较观注的话，应该很清楚，前面就有这方面的介绍。因为大家都知道表单中的部分元素如果单单使用CSS是没办法完成的，所以最近花全力在学习这方面的制作。在本站有关于这样制作有好几个教程了，比如说：

我主要是想通过这样的系列教程让大家更好理解和掌握这方面的制作技巧。那么今天在前面的基础上再次增加一篇有关于表单中的checkbox和radio的样式美化教程——美化表单——自定义checkbox和radio样式。

在这个教程中我们主要从两种方法来实现图片代替默认checkbox和radio的样式，第一种是javascript；第二种是jQuery。但不管哪一种，他们的原理都是一样的。将checkbox和radio默认框和选中框制作成图片，并将其集成在同一张图片中。然后通过样式让其成为label的背景图片，并应用不同的类名让它实现选中和未选中的效果。紧接着需要将checkbox和radio的input产生隐藏的假像，最后在通过js或jQuery来给label增加或删除选中和未选中的类名。详细的制作过程如下：

一、HTML Markup

Checkbox1

Checkbox2

Radio1

Radio2

Radio3

写这样的HTML结构是非常容易的，这里有几点需要注意：

把“input[type=checkbox]”和“input[type=radio]”都放在一个“label”内；

所有“input[type=checkbox]”和“input[type=radio]”必须定义一个唯一的类名，而且其对应的“label”的“for”属性值与相对应的“input”的ID类名一致；

同一组的“input[type=radio]”需要具有一个相同的“name”值。

二、CSS Code

在具体实现设计图之前，我们需要给checkbox和radio准备好样式风格所需的图片：

此时我们在给他写上样式：

/*form style*/

form {

width: 300px;

padding: 18px 20px 0;

margin:20px auto;

background-color: #0064cd;

background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));

background-image: -moz-linear-gradient(#049cdb, #0064cd);

background-image: -ms-linear-gradient(#049cdb, #0064cd);

background-image: -webkit-gradient(linear, left top, lef