css3实现多选

最新推荐文章于 2023-10-31 22:09:55 发布

weixin_30279751

最新推荐文章于 2023-10-31 22:09:55 发布

阅读量853

点赞数

原文链接：http://www.cnblogs.com/gxywb/p/10318321.html

版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            input{
                display: none;
            }
            label{
                display: inline-block;
                width: 10px;
                height: 10px;
                border: 1px solid #ccc;
                position: relative;
            }
            input:checked+label{
                border-color: #888;
            }
            input:checked+label:before{
                content: '';
                display: inline-block;
                width: 2px;
                height: 6px;
                background: #000;
                transform: rotate(-30deg);
                position: absolute;
                top: 4px;
                left: 0;
            }
            input:checked+label:after{
                content: '';
                display: inline-block;
                width: 2px;
                height: 10px;
                background: #000;
                transform: rotate(30deg);
                position: absolute;
                top: 1px;
                left: 3px;
            }
        </style>
    </head>
    <body>
        <input id="food_c" type="checkbox" name="food" />
        <label for="food_c"></label>川菜
        <input id="food_x" type="checkbox" name="food" />
        <label for="food_x"></label>湘菜
        <input id="food_s" type="checkbox" name="food" />
        <label for="food_s"></label>苏菜
        <input id="food_z" type="checkbox" name="food" />
        <label for="food_z"></label>浙菜
    </body>
</html>