如何使用css脚本修改checkbox多选框呢?


摘要:
下文讲述使用css脚本修改checkbox复选框的样式方法分享,如下所示:

例:

<html>
    <head>
        <meta charset="UTF-8">
        <title>猫猫教程(maomao365.com)
        css修改checkbox"选中标志"样式分享
        </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>
<p>
 maomao365.com <br />
 css 修改checkbox样式的示例分享
</p>
<hr />
        <input id="jiaoCheng_1" type="checkbox" name="jiaoCheng" />
        <label for="jiaoCheng_1"></label>语文
        <input id="jiaoCheng_2" type="checkbox" name="jiaoCheng" />
        <label for="jiaoCheng_2"></label>数学
        <input id="jiaoCheng_3" type="checkbox" name="jiaoCheng" />
        <label for="jiaoCheng_3"></label>英文
        <input id="jiaoCheng_4" type="checkbox" name="jiaoCheng" />
        <label for="jiaoCheng_4"></label>历史
    </body>
</html>
css修改checkbox样式的示例分享

css修改checkbox样式的示例分享