ВайрексЕсли ну никак без label нельзя, то максимум что подойдёт:


Так и надо, только в другом порядке :)


при чём чекбокс прячем (насколько я помню он правильно работает и с display: none, но можно его куда -то загнать за пределы видимости, что бы наверняка), а с помощью label:before и label:after реализуем ему красивенькую замену. А стилем input.option:checked + label реализуем нужный внешний вид для случая, когда чекбокс выбран.

И нет никакой простыни стилей и разметки... Если стили совсем простые (сам чекбокс не строится стилями, а задаётся как картинка), то достаточно 3 css селекторов, а в вёрстке вообще ничего лишнего не будет.


P.S. Ваша неприязнь к after и before мне не понятна. Это же не костыль, а специальные псевдоэлементы, которые к тому же позволяют не вносить лишнего мусора в разметку!

user89ВайрексКовырялся, ковырялся, кажетса совсем без :before/:after/position не получится... Можно без before/after/position и даже без ID
Здесь 2 варианта:
- через label -> input -> span (javascript не нужен)
- очень простая верстка (чуть-чуть javascript)
http://jsfiddle.net/g78oh3cu/3/

Ну то, что без ID - это удобно. Но то, что в вёрстке лишний span появился... это не круче чем after или before в стилях ;)

ВайрексПишут мол :before и :after не работают для таких элементов как input/button/img - по причине того что те физически не могут содержать дочерних/вложенных элементов.
Однако браузер Chrome имеет некие отличия в этом плане, и в нём данный финт чудом но работает. К огромному счастью лично мне и требуется только для Chrome.
...а для универсального решения надо будет поломать голову ещё.

Давно Вы занимаетесь вёрсткой? Ваша любовь создавать велосипеды подсказывает мне, что не более полугода.