美化checkbox多选框

最新推荐文章于 2023-06-27 14:10:05 发布

weixin_30718391

最新推荐文章于 2023-06-27 14:10:05 发布

阅读量180

点赞数

原文链接：http://www.cnblogs.com/11lang/p/6690946.html

版权

看到那些UI框架都是有美化checkbox多选框的，不过大多是图片或者是字体图标。于是就利用label仿了个多选框效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        input{
            opacity: 0;
            position: absolute;
            top: 0;
            left: 0;
        }
        p{
            width: 20px;
            height: 20px;
            padding: 3px;
            margin-left: 50px;
            background-color: #88d;
            opacity: .6;
            border: 1px solid #333;
        }
        label{
            position: relative;
            display: block;
            width: 100%;
            height: 100%;
        }
        label:after{
            position: absolute;
            top: 5px;
            left: 4px;
            content: '';
            display: block;
            width: 10px;
            height: 6px;
            border-bottom: 1px solid #333;
            border-left: 1px solid #333;
            transform: rotate(-45deg)
        }

        input:checked + label{
            opacity: 0;
        }
    </style>
</head>
<body>
    <p>
        <input type="checkbox" id="all" name="">
        <label for="all"></label>
    </p>
</body>
</html>