随笔- 105 文章- 0 评论- 12 阅读- 26万

二十六、css3改变checkbox复选框的样式

<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            span {
                position: relative;
            }
            .input_check {
                position: absolute;
                visibility: hidden;
            }
            .input_check+label {
                display: inline-block;
                width: 16px;
                height: 16px;
                border: 1px solid #c00;
            }
            .input_check:checked+label:after {
                content: "";
                position: absolute;
                left: 2px;
                bottom: 12px;
                width: 9px;
                height: 4px;
                border: 2px solid #e92333;
                border-top-color: transparent;
                border-right-color: transparent;
                -ms-transform: rotate(-60deg);
                -moz-transform: rotate(-60deg);
                -webkit-transform: rotate(-60deg);
                transform: rotate(-45deg);
            }
        </style>
    </head>
 
    <body>
        <span><input type="checkbox" class="input_check" id="check3"><label for="check3"></label></span>
    </body>
 
</html>