html - 如何更改单选按钮 'selected' 状态外观？

Question

我已经为 Prestashop 商店的产品属性自定义了单选按钮，但现在所选尺寸在选择时不会改变外观(所需的 background:#000;color:#fff)。

此处的产品页面:http://catwalk-boutique.ro/pantofi/11-pantofi-piele-4578-burgundy.html

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

以下是到目前为止更改的代码位:
• 在 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}

• 和 CSS:

label.radio_btn_round {
background-color: #F8F8F8;
border: 1px solid #C8CCD2;
width: 30px;
height: 30px;
text-align: center;
vertical-align: middle!important;
line-height: 29px;}

input.attribute_radio {display: none;}

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

Answer 1

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

<li>
    <div>
         <span class="checked"><input value="37" selected></span>
    </div>
    <label>37</label>
</li>

CSS 无法“向上”DOM(从“已选择”单选按钮选择父 div 或 li)。

因为 jQuery 在您的站点上可用，我认为您最好的选择是添加一些可以为您执行此操作的轻型 jQuery，并在标签上提供一个类，然后您可以通过 CSS 对其进行处理:

// 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');
    });
});

然后，在您的 CSS 中，此选择器将允许您更改所需的样式:

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