html自定义单选按钮,美化表单——自定义单选按钮和复选按钮

大家都知道，在Web的Form中美化是最头痛的，尤其是表单中的“input[type=checkbox]”、“input[type="radio"]”、“input[type=file]”和select这些元素我们单单只使用CSS是无法匹配设计图的，像背景颜色或者背景图片，甚至说margin和padding等等在各浏览器下都没法实现一致的效果，具体大家可以看看这里所展示的页面效果。为了解决这样的问题，我们只有另选其他的途径。使用CSS和js配合，使用他们实现各浏览器的统一样式。

前面我在本站也介绍了这方面的知识点，比如说《自定义表单——美化你的文件载入框》中介绍了如何通过js和css来美化表单中的文件载入框(input[type=file])，在《自定义表单——jQuery制作个性化Checkbox》中介绍了如何通过jQuery和CSS3来美化复选按钮的效果。那么今天我想和大家一起在学习另外一个有关于表单元素的美化知识——自定义单选按钮和复选按钮。就如下面DEMO展示的效果一样：

一、准备工作

上面DEMO展示的单选和复选按钮是不是很靓呀，为了达到上面的那种DEMO效果，我们需要准备两张背景图片：

这两张图就是我们所需要制作的“单选按钮”和“复选按钮”的效果图，我们后期将会使用“sprites”技术，将其当作背景应用到我们表单中，从而实现表单的美化效果。

二、HTML Markup

我们先按照下面的几个条件创建一个基本的表单：

给每个ipnut定义一个唯一的ID名称；

给每个input匹配一个label标签；

匹配好每个label中的“for”属性，其中“for”值对应其匹配的“input”的“ID”名；

对于单选按钮，如果其是一组的，我们还需要给他们定义一个相同的“name”名。

根据上面的要求，写了一个简单的HTML Markup

Which genres do you like?

Action / Adventure