Html 如何更改单选按钮';选定的';国家形象?

Html 如何更改单选按钮';选定的';国家形象?,html,css,radio-button,prestashop,Html,Css,Radio Button,Prestashop,我已经为Prestashop商店上的产品属性定制了单选按钮,但现在选择的尺寸不会改变外观(所需背景:#000;颜色:#fff) 此处为产品页面: 我想知道的是,在哪里编辑单选按钮的“选定”状态,或者是什么会阻止选定状态的显示(如果是这种情况) 以下是迄今为止修改的代码位: •在product.tpl中: {elseif ($group.group_type == 'radio')} <ul style="padding-left:5px">{assign var=groupqu

我已经为Prestashop商店上的产品属性定制了单选按钮,但现在选择的尺寸不会改变外观(所需
背景:#000;颜色:#fff

此处为产品页面:

我想知道的是,在哪里编辑单选按钮的“选定”状态,或者是什么会阻止选定状态的显示(如果是这种情况)

以下是迄今为止修改的代码位:
•在product.tpl中:

{elseif ($group.group_type == 'radio')}
   <ul style="padding-left:5px">{assign var=groupquantity value= $group.attributes_quantity}
      {foreach from=$group.attributes key=id_attribute item=group_attribute}
          <li>
              <input id="radio_{$groupName|escape:'html':'UTF-8'}-{$id_attribute}" type="radio" class="attribute_radio" name="{$groupName|escape:'html':'UTF-8'}" value="{$id_attribute}" {if ($group.default == $id_attribute)} checked="checked"{/if} />
              <label for="radio_{$groupName|escape:'html':'UTF-8'}-{$id_attribute}" data-comb-quantity="{*$groupquantity[$id_attribute]*}{foreach from=$combinations item=foo}{if $group_attribute == $foo.attributes_values[2]}{$foo.quantity}{/if}{/foreach}" class="radio_btn_round" >{$group_attribute|replace:' EU':''|escape:'html':'UTF-8'}</label>
          </li>
      {/foreach}
   </ul>
{/if}

任何想法都非常感谢。谢谢

Prestashop为此生成的标记使得直接CSS无法实现这一点:

<li>
    <div>
         <span class="checked"><input value="37" selected></span>
    </div>
    <label>37</label>
</li>
然后,在CSS中,此选择器将允许您更改所需的样式:

li.checked label.radio_btn_round {
    background: #000;
    color: white;
}

我假设您正在寻找
:checked
伪类?鉴于PrestaShop正在创建的标记,我认为这是不可能的。输入被隐藏在一个隐藏div中的span中,虽然理论上可以从span中获取“checked”元素(获取一个“checked”类),但是没有CSS技术来获取给定元素的父元素并导航到选择器。您必须使用javascript/jQuery来实现这一点。
// wait until the document is ready
jQuery(function($) {
    // watch for changes to the radio inputs
    $(document).on('change', 'input[type="radio"]', function() {
        $('.attribute_list li')
            // remove the class from all li elements
            .removeClass('checked')
            // find the "checked" radio button
            .find('input[type="radio"]:checked')
            // go up the dom to the nearest li
            .closest('li')
            // and add the "checked" class
            .addClass('checked');
    });
});
li.checked label.radio_btn_round {
    background: #000;
    color: white;
}