UI Kit

index.html

<form action="">
  <fieldset>
  <legend>Custom UI Kit</legend>
  <!--radio-->
  <input type="radio" id="radio" disabled/>
  <label for="radio">Radio button</label>
  <input type="radio" id="radio" />
  <label for="radio" >Radio button</label>
    <hr />
  <!--checkbox-->
  <input type="checkbox" id="chbx-1"/>
  <label for="chbx-1">Unchecked</label>
  <input type="checkbox" id="chbx-2" checked/>
  <label for="chbx-2">Checked</label>
  <input type="checkbox" id="chbx-3" disabled/>
  <label for="chbx-3">Disabled</label>
  </fieldset>
</form>

style.css

body{
  font-family:'Tahoma';
  width:170px;
  margin:0 auto;
}
/* centering */
form{
  width:170px; 
  height:200px; 
  position: absolute; 
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}
/*  UI kit   */
input[type="checkbox"] {
  display:none;  
}
input[type="checkbox"] + label{
  display: block ;        /*every lable - new line*/
  margin: 5px 0;  
}
input[type="checkbox"] + label:before{
  content: '';
  display:inline-block;
  width:8px;
  height: 8px;
  border-radius:50%;
  background: white;
  box-shadow: 0px 0px 0px 4px cyan;  
  margin-right:15px;  
 }
input[type="checkbox"]:checked + label:before{  
  background: #555;        /*dot color*/
  border:2px solid white;  /*white border around dot*/
  width:4px;               /*2+2+4=8*/
  height:4px;
  box-shadow: 0px 0px 0px 4px cyan;
}
/*Disabled triangle*/
input[type="checkbox"]:disabled + label{
  color:#ccc;
}
input[type="checkbox"]:disabled + label:before{  
  box-shadow:0px 0px 0px 0px cyan;
  border-radius:0%;
  width: 0; 
  height: 0;
  border-left:8px solid transparent;
  border-right:8px solid transparent;
  border-bottom:12px solid #ccc;
  margin-right:10px;
  margin-left:-3px;
}

UI-Kit.markdown

UI Kit

How to stylize your inputs.

Hide inputs and work with <label for="#">

Compability: even IE8+;

A Pen by Viacheslav on CodePen.

License.