Стилизация чекбоксов и радиобаттонов

Проблема.

Зачастую по макету Чекбоксы и радиобаттоны должны иметь уникальный дизайн, но напрямую они слабо стилизуются.

Решение.

Создадим разметку

<input type="checkbox" id="awesome" /> 
<label for="awesome">Awesome!</label>

Для стилизации будем использовать label и псевдокласс :checked

input[type="checkbox"] + label::before {
  content: '\a0';
  display: inline-block;    
  vertical-align: 2px;    
  width: 12px;    
  height: 12px;    
  margin-right: 5px;    
  border-radius: 2px;    
  background: silver;    
  text-indent: 2px;    
  line-height: 0.65;
}

Зададим стили для выделенного элемента:

input[type="checkbox"]:checked + label::before {    
    content: '\2713';    
    background: yellowgreen; 
}

Спрячем нативные чекбокс.

input[type="checkbox"] {    
    position: absolute;    
    clip: rect(0,0,0,0); 
}

Демо

Радиобаттоны делаем по аналогии.