前端案例--纯CSS3美化复选框

最新推荐文章于 2025-06-01 09:58:00 发布

原创

最新推荐文章于 2025-06-01 09:58:00 发布 · 3.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #前端 #表单 #伪类

技巧：将input按钮和美化内容都放在label标签内，再通过定位将input按钮溢出隐藏！使用CSS3中的E:checked伪类选择器触发美化表单！

纯CSS3美化复选框

效果图：

纯CSS3美化复选框

HTML：


<!--纯css3实现单选框美化 -->
<!-- IE8以及一下版本不支持，edge也不支持，在ie9/ie10兼容显示 -->
<div class="type">
    <dl id="type">
        <dt>配送类型：</dt>
        <!-- 技巧：将input按钮和美化内容都放在label标签内，在通过定位将input按钮溢出隐藏！ -->
        <dd><label><input type="radio" name='radioButton'><a ><b></b>全部</a></label></dd>
        <dd><label><input type="radio" name='radioButton'><a ><