Стилизованный radio button на одном CSS

Однажды мне понадобилось стилизовать радиокнопку, но в то же время не хотелось использовать разного рода скрипты, поскольку сайт на Джумле, и многие модули и без того подключают свои скрипты, а заниматься потом вылавливание ошибок не хотелось. Поэтому было решено воспользоваться одним лишь CSS. Итак, решение: 

Структура будет следующего вида: 

<input type="radio" id="chk_id" /> <label for="chk_id"><span class="style-check"></span></label>

Правила CSS. 

Первым делом, убираем наш нестилизованный input: 

input[type="radio"] {
  display:none;
}

Далее, собственно занимаемся стилизацией нашего псевдо-инпута. Само собой, у вас могут быть свои стили, я лишь скопировал те, которые были у меня в вёрстке. Я использовал картинку, а может быть что угодно. Но можно обойтись и обычным background, если извернуться. 

input[type="radio"] + label span.style-check {
  display: inline-block; 
  width: 19px;
  height: 19px;
  margin: -1px 4px 0 0;
  vertical-align: middle;
  background: url('../images/radio.png') left top no-repeat;
  cursor: pointer;
}

А с помощью следующего правила стилизуем input уже в активном состоянии: 

input[type="radio"]:checked + label span.checkim {
  background:url('../images/radio-active.png') left top no-repeat;
}

Так же, данное решение можно использовать по аналогии и для checkbox.