CSS3 Checkboxes/Radios

by polinux

HTML

<ul class="gf-checkbox">
    <li>
        <input type="checkbox" id="checkbox-1" />
        <label for="checkbox-1">unchecked checkbox</label>
    </li>
    <li>
        <input type="checkbox" id="checkbox-2" checked="checked" />
        <label for="checkbox-2">checked checkbox</label>
    </li>
    <li>                     <input type="checkbox" id="checkbox-3" disabled="disabled" /><label for="checkbox-3">disabled unchecked checkbox</label>                 </li><li>                     <input type="checkbox" id="checkbox-4" disabled="disabled" checked="checked" /><label for="checkbox-4">disabled checked checkbox</label>                 </li>             </ul><h2>             Radios</h2><ul class="gf-radio">                 <li>                     <input type="radio" name="radio-group-1" id="radio-1" checked="checked" /><label for="radio-1">option one</label>                 </li><li>                     <input type="radio" name="radio-group-1" id="radio-2" /><label for="radio-2">option two</label>
</li>
</ul>

<h2>Thiès is heading 2</h2>
<h2>❐&#x2713;</h2>
<h2>&#x25A2;&#x2714;</h2>
<h1>&#x25A2;&#x2714;</h1>
<h1>&#x20DE;&#x25A2;</h1>

CSS

body {
    font-family: Arial,Helvetica,sans-serif;
    
font-size: 2.5em;
}
h1 {letter-spacing:2px;}
h2 {letter-spacing:-18px;}

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label{
    cursor:pointer;}
input[type="checkbox"] + label::before{
    content: "▢";
    letter-spacing:-.8em;
    display:inline-block;
    width:1.2em;
    height:2em;
}

input[type="checkbox"]:checked + label::before{
    content: "▢✔";
}