Characteristics display as buttons

Hello,

I would like to "simulate" radio buttons to be something like regular buttons (check screenshot). When user click on desired size of cloth it should change color and stay in that color. If user pick other size it ll change color when he click on other button. I managed to change display, but button color changing doesnt work. Button changing color on :hover but not on :checked. What am I doing wrong?

I am doing changes on local, so u can't check it on live site

.hikashop_product_characteristics_table input[type=radio] {
	display: none;
	}
.hikashop_product_characteristics_table label{
    display:inline-block;
    margin: 2px;
    padding: 4px 12px;
    border: 1px solid #333;
	cursor: pointer;
}
.hikashop_product_characteristics_table  label  + input[type=radio]:checked { 
    background: blue;
}

Hi,

the line

.hikashop_product_characteristics_table  label  + input[type=radio]:checked {

$values[$k]=$value->characteristic_value;

$values[$k]='<span>'.$value->characteristic_value.'</span>';

.hikashop_product_characteristics_table input[type=radio]:checked + span {

Hello,

Thank u for the answer, but there is a problem. What I am trying to achive have most of online shops around. Its basic option for user to select size of cloth and only when user choose size that button changing color on click (and stying in that color).
I don't have knowledge in js. I guess on click it should add class I want, but I can't figure it out.
About changing core of Hikashop. I did try but what u suggested but it changed color of all labels (not only on click). I need it to change (and stay) only on click (so user know he choosed proper size)

I need something similar to this: jsfiddle.net/j08691/5ovLtdfn/
radio buttons should be hidden and labels should change color on click

Hi,

if you use the selector like in my answer

.hikashop_product_characteristics_table input[type="radio"]:checked + span {

// REGISTER A CLICK ON A SIZE LABEL AND ADD THE CLASS CHECKED TO IT
jQuery('table.hikashop_product_characteristics_table input').click(function(){
     jQuery('table.hikashop_product_characteristics_table label').removeClass('checked');
     jQuery(this).parent().addClass('checked');
});

//ON PAGE LOAD SELECT THE DEFAULT SIZE LABEL
jQuery('table.hikashop_product_characteristics_table input:checked').parent().addClass('checked');

.hikashop_product_characteristics_table label.checked { 
    background: blue;
}

Thanks a lot for help. I used css as u said and it's working!

Hello,

I have been using option to customize characteristics on product page in the way explained in this topic.

After every update I would change: /administrator/components/com_hikashop/types/characteristic.php

I would change line 221 to: $values[$k]='<span>'.$value->characteristic_value.'</span>';

However, I am testing latest Hikashop version on my local, and I dont see span around characteristic anymore so css customize doesnt work.

What changed? I cant figure it out.