利用伪元素before实现自定义checkbox样式

最新推荐文章于 2023-02-22 23:11:32 发布

weixin_30781433

最新推荐文章于 2023-02-22 23:11:32 发布

阅读量397

点赞数

原文链接：http://www.cnblogs.com/tracine0513/p/8999165.html

版权

原理：label标签的for属性可以将文字与复选框进行关联，点击文字可以同时将复选框选中。隐藏checkbox标签，利用label标签的before伪元素来实现自定义样式。设置before伪元素的边框border属性实现复选框的外框，before伪元素的content值可为unicode字符集，这样就可以设置checkbox中选中状态，可以实现勾选效果、五角星效果、多边形效果等等。

代码：

<html>
    <head>
        <style>
            * { font-size: 12px; }
            input[type=checkbox].chk1 { display: none; }
            input[type=checkbox].chk1 + label::before { content: ""; display: inline-block; width: 10px; height: 10px; line-height: 10px; border: 1px solid #000; vertical-align: text-bottom; }
            input[type=checkbox].chk1:checked + label::before { content: "\2713"; width: 10px; height: 10px; line-height: 10px; }            
            
            input[type=checkbox].chk2 { display: none; }
            input[type=checkbox].chk2 + label::before { content: ""; display: inline-block; width: 10px; height: 10px; line-height: 10px; border: 1px solid #000; margin-right: 3px; vertical-align: text-bottom; }
            input[type=checkbox].chk2:checked + label::before { content: "\2713"; width: 10px; height: 10px; line-height: 10px; text-indent: 1px; }        
            
            input[type=checkbox].chk3 { display: none; }
            input[type=checkbox].chk3 + label::before { content: ""; display: inline-block; width: 10px; height: 10px; line-height: 10px; border: 1px solid #000; margin-right: 3px; vertical-align: text-bottom; }
            input[type=checkbox].chk3:checked + label::before { content: "\25c6"; width: 10px; height: 10px; line-height: 10px; }
        </style>
    </head>
    <body>
        <div>
            <input type="checkbox" id="chk1" class="chk1" />
            <label for="chk1"></label>
        </div>
        <br />
        <br />
        <div>
            <input type="checkbox" id="chk2" class="chk2" />
            <label for="chk2">选中</label>
        </div>
        <br />
        <br />
        <div>
            <input type="checkbox" id="chk3" class="chk3" />
            <label for="chk3">选中</label>
        </div>
    </body>
</html>

效果图：

转载于:https://www.cnblogs.com/tracine0513/p/8999165.html

weixin_30781433

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用伪元素before实现自定义checkbox样式

原理：label标签的for属性可以将文字与复选框进行关联，点击文字可以同时将复选框选中。隐藏checkbox标签，利用label标签的before伪元素来实现自定义样式。设置before伪元素的边框border属性实现复选框的外框，before伪元素的content值可为unicode字符集，这样就可以设置checkbox中选中状态，可以实现勾选效果、五角星效果、多边形效果等等。代码：...
复制链接

扫一扫