Customize default CheckBox, Radiobox with css and HTML

Best site for download customizations for checkbox is: http://www.csscheckbox.com/
and for radio buttons: http://www.csscheckbox.com/radio-buttons/0/

Pick one of them and save picture of checkbox/radiobox to your computer so you can callit from css like this: background-image:url(../img/cssradiobox1.png);.

Add this css code to your css file:

 /*checkboxes*/
 label {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
 }
 input[type=checkbox].css-checkbox {
   position: absolute;  
   overflow: hidden;  
   clip: rect(0 0 0 0);  
   height:1px;  
   width:1px;  
   margin:-1px;  
   padding:0;
   border:0;
 }
 input[type=checkbox].css-checkbox + label.css-label {
   padding-left:20px;
   height:15px;  
   display:inline-block;
   line-height:15px;
   background-repeat:no-repeat;
   background-position: 0 0;
   font-size:15px;
   vertical-align:middle;
   cursor:pointer;
 }
 input[type=checkbox].css-checkbox:checked + label.css-label {
   background-position: 0 -15px;
 }
 .radio label, .checkbox label {
   min-height: 10px;
 }
 .account_creation label {
   padding-top: 0px;
 }
 /*specific classes related to Checkbox skins*/
 .lite-gray-check{background-image:url(../img/lite-gray-check.png);}
 input[type=checkbox].css-checkbox.med + label.css-label.med {
   padding-left:22px;
   height:17px;  
   display:inline-block;
   line-height:17px;
   background-repeat:no-repeat;
   background-position: 0 0;
   font-size:15px;
   vertical-align:middle;
   cursor:pointer;
 }
 input[type=checkbox].css-checkbox.med:checked + label.css-label.med {
   background-position: 0 -17px;
 }
 input[type=checkbox].css-checkbox.sme + label.css-label.sme {
   padding-left:22px;
   height:16px;  
   display:inline-block;
   line-height:16px;
   background-repeat:no-repeat;
   background-position: 0 0;
   font-size:15px;
   vertical-align:middle;
   cursor:pointer;
 }
 input[type=checkbox].css-checkbox.sme:checked + label.css-label.sme{
   background-position: 0 -16px;
 }
 input[type=checkbox].css-checkbox.lrg + label.css-label.lrg {
   padding-left:22px;
   height:20px;  
   display:inline-block;
   line-height:20px;
   background-repeat:no-repeat;
   background-position: 0 0;
   font-size:15px;
   vertical-align:middle;
   cursor:pointer;
 }
 input[type=checkbox].css-checkbox.lrg:checked + label.css-label.lrg{
   background-position: 0 -20px;
 }
 input[type=radio].css-radiobox {
   position:absolute; z-index:-1000; left:-1000px; overflow: hidden; clip: rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0;
 }
 input[type=radio].css-radiobox + label.css-radiolabel {
   padding-left:22px;
   height:16px;  
   display:inline-block;
   line-height:16px;
   background-repeat:no-repeat;
   background-position: 0 0;
   font-size:15px;
   vertical-align:middle;
   cursor:pointer;
   /*padding-left:23px;
   height:18px;  
   display:inline-block;
   line-height:18px;
   background-repeat:no-repeat;
   background-position: 0 0;
   font-size:18px;
   vertical-align:middle;
   cursor:pointer;*/
 }
 input[type=radio].css-radiobox:checked + label.css-radiolabel {
   background-position: 0 -16px;
 }
 label.css-radiolabel {
   background-image:url(../img/cssradiobox1.png);
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
 }

After this you can use it on your web page like this:
Radio buton example:

 <input type="radio" name="plan" class="css-radiobox" id="planluxury" value="luxury"checked="checked" />
                <label for="planluxury" class="css-radiolabel sme radGroup1" class="top">Luxury</label>

Checkbox example:

 <input type="checkbox" class="css-checkbox" name="optin" id="optin" value="1"checked="checked" autocomplete="off"/>
                <label for="optin" class="css-label lite-gray-check">Receive special offers from our partners!</label>

As you can see we added to radio box input class="css-radiobox" and to label of radio box: class="css-radiolabel

For checkbox we added to input: class="css-checkbox",and for label: class="css-label lite-gray-check"