before 的应用

刘德胜 69次浏览

摘要:input[type="checkbox"]{ width:20px; height:20px; display:inline-block; text-align:center; vertical-align:middle; line-height:18px;...

        input[type="checkbox"] {
            width: 20px;
            height: 20px;
            display: inline-block;
            text-align: center;
            vertical-align: middle;
            line-height: 18px;
            margin-right: 10px;
            position: relative;
        } 
        input[type="checkbox"]::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            background: #fff;
            width: 100%;
            height: 100%;
            border: 1px solid #fff;
        } 
        input[type="checkbox"]:checked::before {
            content: "\2713";
            background-color: #fff;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            border: 1px solid #fff;
            color: red;
            font-size: 20px;
            font-weight: bold;
        }