Html 如何更改单选按钮';选定的';国家形象?
我已经为Prestashop商店上的产品属性定制了单选按钮,但现在选择的尺寸不会改变外观(所需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
背景:#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;
}