Изменение стиля checkbox

пример на сайте я верстал http://dsub.ru добавь в корзину любой товар и зайди в корзину

чекбокс скрывается за место него виден спан с картинкой можно еще радиобатон так делать
СЮДА HTML не вставляется.. напишу русскими " <инпут тупе="radio" name="n1" id="ch4"><лабел for="ch4"><спан></спан></лабел> "

input[type="checkbox"]{
display:none;
}
input[type="checkbox"] + label{
color: #606060;
font-size: 13px;
cursor: pointer;
}
input[type="checkbox"] + label span{
position: relative;
top: 0px;
display: inline-block;
vertical-align: middle;
width: 27px;
height: 27px;
background: url(../images/icons/checkbox.png) no-repeat 0 0;
cursor: pointer;
}
@media all and (-webkit-min-device-pixel-ratio:0) {
input[type="checkbox"] + label span{
top: -1px;
}
}
@-moz-document url-prefix() {
input[type="checkbox"] + label span{
top: -1px;
}
}
input[type="checkbox"]:checked + label span{
background:url(../images/icons/checkbox.png) no-repeat -27px 0;
}

input[type="radio"]{
display:none;
}
input[type="radio"] + label{
color: #606060;
font-size: 13px;
cursor: pointer;
}
input[type="radio"] + label span{
position: relative;
top: 0px;
display: inline-block;
vertical-align: middle;
width: 27px;
height: 27px;
background: url(../images/icons/radio.png) no-repeat 0 0;
cursor: pointer;
}
@media all and (-webkit-min-device-pixel-ratio:0) {
input[type="radio"] + label span{
top: -1px;
}
}
@-moz-document url-prefix() {
input[type="radio"] + label span{
top: -1px;
}
}
input[type="radio"]:checked + label span{
background:url(../images/icons/radio.png) no-repeat -27px 0;
}

С чекбоксами все сложно. Так что лучше действительно сделать на джаваскрипте.
А почему такой вариант не устраивает? Жаваскрипт сейчас включен и поддерживается у 99% посетителей. А для тех у кого выключен будет показываться обычный чекбокс