Custom checkbox & radio input with pure css and fallback

INTRO: I am currently working on a new styleguideline and here is my pro tip for customizing checkboxes and radio buttons with pure CSS3 and a implicit fallback to native.

+ First we create to divs with classes 'checkbox' and 'radio' like so:

div.checkbox
div.radio

+ Then insert the input fields for type radio and type checkbox like so:

div.checkbox>input#chkbx[type=checkbox]+label[for=chkbx]
div.radio>input#rdo[type=radio]+label[for=rdo]

INFO: So yes, I am using Emmet, if you don't know it, you should really check it out ;-)

+ CSS Part ist next: Let's hide the native inputs:

.checkbox input:checked, 
.checkbox input:not(checked),
.radio input:checked, 
.radio input:not(checked) {
 display: none !important;
}

+ And add some base styles wich we rely on:

.checkbox label, .radio label{
 display: inline-block;
 position: relative;
}
.checkbox input:checked + label, 
.checkbox input:not(checked) + label,
.radio input:checked + label, 
.radio input:not(checked) + label {

 padding-left: 25px;
 padding-bottom: 1px;
 font-size: 13px;
 cursor: pointer;
}

INFO: I am explicit selecting :checked and :not(checked) for this reason:
For Browser not supporting :checked my ruleset won't apply so the native input will be displayed.

+ Now we add Pseudo Elements to our labels for checked and unchecked states:

.checkbox input:not(checked) + label:before {
 border: 1px solid #CFCFCF;
 content: "";
 display: inline-block;

 width: 14px;
 height: 14px;

 margin-right: 10px;
 position: absolute;
 left: 0;
 bottom: 1px;

}
.checkbox input:checked + label:before{
 border: 1px solid #3E3E3E;
 color: #3E3E3E;
 content: "2713円";
 font-size: 17px;
 text-align: center;
 line-height: 13px;
 font-weight: bold;
}

+ Same for radio styling:

.radio input:not(checked) +label:after,{
 border: 1px solid #CFCFCF;
 content: "";
 display: inline-block;
 height: 14px;
 width: 14px;
 left: 0;
 bottom: 1px;
 position: absolute;
 text-align: center;
 font-size: 13px;
 line-height: 15px;
 font-weight: bold;
}
.radio label:after {
 border-radius: 8px;
}
.radio input:checked + label:after{
 border-color: #3E3E3E;
 background-color: #3E3E3E;
 box-shadow: 0 0 0 2px #FFFFFF inset;

}