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
Copyright © 2011-2022 走看看