css3 checkbox复选框样式的更改

最新推荐文章于 2022-05-10 13:06:38 发布

原创最新推荐文章于 2022-05-10 13:06:38 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

html5+css3 同时被 2 个专栏收录

35 篇文章

订阅专栏

动画效果

25 篇文章

订阅专栏

本文介绍了一种使用纯CSS实现自定义样式的复选框方法。通过隐藏默认的复选框并用标签元素模拟复选框外观，可以轻松地定制其视觉效果。当复选框被选中时，会显示一个旋转的对勾图标。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css:

<style>
            .mycheck {
                width:25px;
                margin:20px 100px;
                position:relative;
            }
            .mycheck input[type=checkbox] {
                visibility:hidden;
            }
            .mycheck label {
                cursor:pointer;
                position:absolute;
                width:25px;
                height:25px;
                top:0;
                left:0;
                background:#fff;
                border:2px solid #ccc;
                -moz-border-radius:50%;
                -webkit-border-radius:50%;
                border-radius:50%;
            }
            .mycheck label:after {
                opacity:0;
                content:'';
                position:absolute;
                width:9px;
                height:5px;
                background:transparent;
                top:6px;
                left:6px;
                border:4px solid #fff;
                border-top:none;
                border-right:none;
                -webkit-transform:rotate(-45deg);
                -moz-transform:rotate(-45deg);
                -o-transform:rotate(-45deg);
                -ms-transform:rotate(-45deg);
                transform:rotate(-45deg);
            }
            .mycheck input[type=checkbox]:checked + label {
                background:#f40;
                border:2px solid #f40;
            }
            .mycheck input[type=checkbox]:checked + label:after {
                opacity:1;
                background:#f40;
            }


        </style>

html:

<body>
        <div class="mycheck">
            <input type="checkbox" value="1" id="checkbox1" name="">
            <label for="checkbox1"></label>
        </div>
        <div class="mycheck">
            <input type="checkbox" value="1" id="checkbox2" name="">
            <label for="checkbox2"></label>
        </div>
        <div class="mycheck">
            <input type="checkbox" value="1" id="checkbox3" name="">
            <label for="checkbox3"></label>
        </div>
        <div class="mycheck">
            <input type="checkbox" value="1" id="checkbox4" name="">
            <label for="checkbox4"></label>
        </div>

    </body>