Customize checkbox, redio, etc.

Go directly to the code:

I can read it, but I can't understand it.

.messageState li {list-style: none;float: left;padding-right:30px;font-size: 16px;color: #1e1e1e;-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;}
.messageState li input[type="checkbox"] {position: absolute;clip: rect(0, 0, 0, 0);}
.messageState li input[type="checkbox"] + label::before {
    content: "\a0";
    display: inline-block;
    vertical-align: 0px;
    width: 16px;
    height: 16px;
    margin-right: 10px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 2px;
    text-indent: 2px;
    line-height: 13px;
}
.messageState li input[type="checkbox"]:checked + label::before {
    content: "\2713";
    color: white;
    background-color: #009FE1;
}
.messageState li input[type="checkbox"]:focus + label::before {
    box-shadow: 0 0 1px 3px #eee;
}
.messageState li input[type="checkbox"]:disabled + label::before {
    box-shadow: none;
    background-color: gray;
    color: #555;
}