这篇文章主要讲一下如何自定义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