Use pseudo-element before to implement custom checkbox style

Principle: The for attribute of the label tag can associate the text with the checkbox, and click the text to select the checkbox at the same time. Hide the checkbox label and use the before pseudo-element of the label label to implement custom styles. Set the border property of the before pseudo-element to realize the outer frame of the checkbox. The content value of the before pseudo-element can be a unicode character set, so that the selected state in the checkbox can be set, and the check effect, pentagram effect, polygon effect, etc. can be realized. etc. _

Code:

<html>
    <head>
        <style>
            * { font-size: 12px; }
            input[type=checkbox].chk1 { display: none; }
            input[type=checkbox].chk1 + label::before { content: ""; display: inline-block; width: 10px; height: 10px; line-height: 10px; border: 1px solid #000; vertical-align: text-bottom; }
            input[type=checkbox].chk1:checked + label::before { content: "\2713"; width: 10px; height: 10px; line-height: 10px; }            
            
            input[type=checkbox].chk2 { display: none; }
            input[type=checkbox].chk2 + label::before { content: ""; display: inline-block; width: 10px; height: 10px; line-height: 10px; border: 1px solid #000; margin-right: 3px; vertical-align: text-bottom; }
            input[type=checkbox].chk2:checked + label::before { content: "\2713"; width: 10px; height: 10px; line-height: 10px; text-indent: 1px; }        
            
            input[type=checkbox].chk3 { display: none; }
            input[type=checkbox].chk3 + label::before { content: ""; display: inline-block; width: 10px; height: 10px; line-height: 10px; border: 1px solid #000; margin-right: 3px; vertical-align: text-bottom; }
            input[type=checkbox].chk3:checked + label::before { content: "\25c6"; width: 10px; height: 10px; line-height: 10px; }
        </style>
    </head>
    <body>
        <div>
            <input type="checkbox" id="chk1" class="chk1" />
            <label for="chk1"></label>
        </div>
        <br />
        <br />
        <div>
            <input type="checkbox" id="chk2" class="chk2" />
            <label for="chk2">选中</label>
        </div>
        <br />
        <br />
        <div>
            <input type="checkbox" id="chk3" class="chk3" />
            <label for="chk3">选中</label>
        </div>
    </body>
</html>

Effect picture:

Use pseudo-element before to implement custom checkbox style

Guess you like