欢迎光临
我们一直在努力

css 自定义input的checkbox的样式(原创非转载)

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

 

赞(0)
未经允许不得转载:自游互动 » css 自定义input的checkbox的样式(原创非转载)
分享到: 更多 (0)

自由技术,自由自在

项目合作联系我们