How to highlight the selected item?

This problem. CMS Prestashop. On the product page there are attributes, this meaning of "size". When you hover the selected size is highlighted, that is the box labeled "48" becomes black. But if you choose to click on this size, the allocation does not occur. It is the same as all white. Please help. It is necessary that when choosing size, the cell with this value and remained black.
Example page https://ddclothes.ru/index.php?id_product=234&cont...
Code page pastebin.com/QYxLCG69 328 line code attributes
DUvzwFD5ueA.jpg
July 2nd 19 at 13:14
3 answers
July 2nd 19 at 13:16
Solution
line 356

<li{if ($group.default="=" $id_attribute)} class="active" { if}>
 <input onchange="$(this).parent().parent().find('li').removeClass('active').find('input:checked').parent().addClass('active')" type="radio" class="attribute_radio" name="{$groupName|escape:'html':'UTF-8'}" value="{$id_attribute}" {if ($group.default="=" $id_attribute)} checked="checked" { if}>
<span>{$group_attribute|escape:'html':'UTF-8'}</span>
</li{if>


in the styles to add
was #attributes .attribute_list ul li:hover

became #attributes .attribute_list ul li:hover, #attributes .attribute_list ul li.active
July 2nd 19 at 13:18
Solution
input:checked + span {}

And I would span was replaced by a label
And you know what illumination there not to span?... - kasandra.Hackett commented on July 2nd 19 at 13:21
: why would it not change? - Elmer.Upt commented on July 2nd 19 at 13:24
: Because the author is not an expert to change it - kasandra.Hackett commented on July 2nd 19 at 13:27
: ohhhhh my God
1. And in that example it is done, input + label, in the author span, that's why I suggested a simple variant.

2. In Your variant it is necessary to add inline js in input, my only change span to a label. And code more than 2 letters and semantically correct.
The styles Supplement are approximately equal, and unnecessary classes are not added.

Then the author can decide which option is prettier. - Elmer.Upt commented on July 2nd 19 at 13:30
The author has combined both the answer and done)) - nikita.Stracke commented on July 2nd 19 at 13:33
author cool :) - Elmer.Upt commented on July 2nd 19 at 13:36
: No, it's cool. Author nemos) - nikita.Stracke commented on July 2nd 19 at 13:39
:
Well, you think, if somewhere it was already written input:checked + span, without specifying a parent, the author would have noticed that the selected size is highlighted, but not as much as I would like. And then the question and the answer would be only about changing styles.

:)

And if you write parent selectors
#attributes .attribute_list li input:checked + span
, that is to kill you have to be very hardworking grief coder and write a lot spare extra code.
Well, again, it would be immediately noticeable, by analogy with the first part of my post immediately. - Elmer.Upt commented on July 2nd 19 at 13:42
: well, in any case, the author that there nahimichili, but it turned out neither my nor your choice)))) - kasandra.Hackett commented on July 2nd 19 at 13:45
: Yes, like the rules we have, no?)) - nikita.Stracke commented on July 2nd 19 at 13:48
your new guidance is not working, or I cache)) - kasandra.Hackett commented on July 2nd 19 at 13:51
: I also always do all to learn and do combos.
Most importantly, the author is happy, then we should be sad :) - Elmer.Upt commented on July 2nd 19 at 13:54
: Just now instead of the black square is highlighted with a red dot. The main works and the client will see that you have chosen) - nikita.Stracke commented on July 2nd 19 at 13:57
July 2nd 19 at 13:20
Thank you all! and You are the best!

Find more questions by tags PrestashopCSSHTML