zoukankan html css js c++ java

css3实现多选

<!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>

查看全文

相关阅读:
Android控制软键盘的现实与隐藏
 Android调用手机浏览器
 DatePicker隐藏年/月/日
 ecplise中设置字符编码
 Git问题总结
 Git的简单使用
 资源
 equals和==
class文件查看
 Class file collision

原文地址：https://www.cnblogs.com/gxywb/p/10318321.html