自游互动这篇文章主要讲一下如何自定义input类型为checkbox控件的样式，怎么通过简单的css实现checkbox样式自定义,美化checkbox控件的样式
首先看效果
这里的框大小、背景、勾的颜色等都可以调，具体可以根据自己的风格，改动一点代码就可以实现，非常简单！主要样式就3行代码
注： 勾号的上下位置是通过line-height 调整的。
直接上代码
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body { padding: 100px; }
.customCheckbox { display: none; }
.customCheckboxLabel:before { content: ""; display: inline-block; width: 18px; height: 18px; line-height: 18px; border: solid 1px #ccc; background-color: #fff; vertical-align: top; margin-right: 10px; text-align: center; border-radius: 4px; }
.customCheckbox:checked + .customCheckboxLabel:before { content: "\2714"; background-color: #1CB15C; border: solid 1px #1CB15C; color: #fff; }
.customCheckbox:checked + .color2:before {content: "\2714"; background-color: red; color: #1CB15C;border: solid 1px red; }
</style>
</head>
<body>
<input type="checkbox" id="mycheckbox" class="customCheckbox" />
<label class="customCheckboxLabel" for="mycheckbox">我是一个绿色自定义checkbox</label>
<br />
<input type="checkbox" id="mycheckbox2" class="customCheckbox" />
<label class="customCheckboxLabel color2" for="mycheckbox2">我是一个红色自定义checkbox</label>
</body>
</html>
创作不容易，转载时复上地址：http://www.freetechs.cn/archives/467