Едет вёрстка и стиль при стилизации радио-кнопок - Дизайн и оформление

Всем привет!

Помогите, гуру всезнающие! Третий день сижу, так и не могу понять, в чём же ошиблась.
Были radio-buttons, решила сделать их "квадратными", ок, получилось, но они поехали по горизонтали каждая вниз на сколько-то... лесенкой!
Решила выделить цветом "активную" - ок, цвет есть, но только если долго "нажимать" на кнопку...

Сцыль https://kite.su/kite/50-fifty-kite-2017
То, что понаделала:

.jshop .input_type_radio
{float:left;
white-space:nowrap;}

.jshop input[type="radio"]
{position: absolute;
left: -9999px;}

.jshop label
{display: block;
margin: auto;
padding: 5px 10px;
border: 1px solid #E7E9EA;
border-radius: 4px;
background:none;
box-shadow:none;
cursor:pointer;
overflow:hidden;
font-weight:300;}

.jshop label:hover
{border:1px solid #BBBBBB;
border-radius: 4px;background:none;}

.jshop label:active, .jshop .input_type_radio:active
{background-color: #ff3200;
color:#ffffff;border:1px solid #ff3200;
border-radius: 4px;}

Привет, а как нужно чтобы они стояли? По горизонтали? И для чего у span10 ширина в 200%?

Да, по горизонтали в одну линию.
Хм... 200... думаю, рука соскочила) Поменяла на 100 - изменений никаких, то есть оно вряд ли как-то влияет на сами кнопки

Да не влияет, просто не хорошо))) Уберите <br> между input`ами.

Уберите <br> между input`ами.

это в настройках, не помню точно как называется, что то там "вертикально/горизонтально"

это в настройках, не помню точно как называется, что то там "вертикально/горизонтально"

точняк. "Отображение значений атрибутов вертикально"
настройки - товар

 
Ну я как всегда)
Спасибо, ребята! Всё работает

А подождите!
Не всё)))
Как заставить активную кнопку выдать заданный цвет?
Получается, мой CSS чем-то перекрывается... или...

.jshop label:active, .jshop .input_type_radio:active
{background-color: #ff3200;
color:#ffffff;border:1px solid #ff3200;
border-radius: 4px;}

.jshop .input_type_radio:active кажется, лишний... работает с .jshop label:active но только при удержании кнопки... а :hover спокойно меняется...

а причем тут актив ?
checked надо стилить

С checked вообще не работало, или не срослось)
Подскажите, какому из элементов присвоить это?

Аааа! ! Ааааа!
Вот оно что)))
.jshop input[type="radio"]:checked +label

Код

input[type="radio"]:checked + label{background:red}

Простите, не увидела)

ОГРОМНОЕ ВСЕМ СПАСИБО! Без Вас - как без рук)