Custom Checkbox & Radio without JS

From http://habrahabr.ru/post/144104/.

by id0

HTML

<ul>                
    <li>
        <input id="cfirst" type="checkbox" name="first" checked hidden />
        <label for="cfirst">Checked checkbox</label>
    </li>
    <li>
        <input id="csecond" type="checkbox" name="second" hidden />
        <label for="csecond">Unchecked checkbox</label>
    </li>
    <li>
        <input id="cthird" type="checkbox" name="third" hidden disabled />
        <label for="cthird">Disabled checkbox</label>
    </li>
    <li>
        <input id="clast" type="checkbox" name="last" checked hidden disabled />
        <label for="clast">Disabled checked checkbox</label>
    </li>
</ul>
<ul>                
    <li>
        <input id="rfirst" type="radio" name="radio" checked hidden />
        <label for="rfirst">Checked radio</label>
    </li>
    <li>
        <input id="rsecond" type="radio" name="radio" hidden />
        <label for="rsecond">Unchecked radio</label>
    </li>
    <li>
        <input id="r3" type="radio" name="radio" hidden />
        <label for="r3">Unchecked radio</label>
    </li>
    <li>
        <input id="r4" type="radio" name="radio" hidden />
        <label for="r4">Unchecked radio</label>
    </li>
    <li>
        <input id="r2.1" type="radio" name="radio2" hidden />
        <label for="r2.1">Unchecked radio</label>
    </li>
    <li>
        <input id="r2.2" type="radio" name="radio2" hidden />
        <label for="r2.2">Unchecked radio</label>
    </li>
    <li>
        <input id="rthird" type="radio" name="radio" hidden disabled />
        <label for="rthird">Disabled radio</label>
    </li>
</ul>

SCSS

li {
    margin: 25px;
}
label {
    border: solid 1px black;
    padding: 10px;
}
input[type="checkbox"],
input[type="radio"] {
    display:none;            
}
input[type="checkbox"] + label, 
input[type="radio"] + label {
  font: 18px bold;
  color: #444;
  cursor: pointer;
}
input[type="checkbox"]:checked + label,
input[type="radio"]:checked + label {
    color: white;
    background: black;
}
input[type="checkbox"]:disabled + label,
input[type="radio"]:disabled + label {
    cursor: auto;
    color: #888;
    border-color: #888;
}
input[type="checkbox"]:checked:disabled + label,
input[type="radio"]:checked:disabled + label {
    color: #555;
}