我有一个网站上的问题.几年前,我安装了一个插件添加一些额外的选项到woocommerce产品.我有一些工作弄清楚的css,但最后一切工作.现在,我做了插件的更新,事情改变了.
我需要更改标签的背景颜色,其中包含一个隐藏的复选框。当访问者点击标签时,复选框被选中(隐藏),我希望标签更改背景颜色。
这是改变悬停和活动标签颜色的代码:
.tm-extra-product-options .bloesems-div ul.tmcp-ul-wrap.tm-extra-product-options-checkbox li.tmcp-field-wrap .tc-label.tm-label:hover {
background:#9FC649;
}
.tm-extra-product-options .bloesems-div ul.tmcp-ul-wrap.tm-extra-product-options-checkbox li.tmcp-field-wrap .tc-label.tm-label:active {
background:#C6FA99;
}
字符串
这是更新前的CSS:
第一个月
我不知道为什么“~”在那里.但它是在原来的css.
标签就是这样建立起来的。
<div class="tc-cell tc-col tc-element-container">
<ul class="tmcp-ul-wrap tmcp-elements tm-extra-product-options-checkbox tm-element-ul-checkbox element_0 bloesems-ul" data-rules="{"valueKBO_0":[""]}" data-original-rules="{"ValueKBO_0":[""]}" data-rulestype="{"ValueKBO_0":[""]}" data-tm-validation="[]">
<li class="tmcp-field-wrap tc-active">
<label class="tm-epo-field-label" for="tmcp_choice_0_0_1656df54326881">
<input type="checkbox" id="tmcp_choice_0_0_1656df54326881" name="tmcp_checkbox_0_0" class="tmcp-field bloesems tm-epo-field tmcp-checkbox tcenabled" data-price="" data-rules="[""]" data-original-rules="[""]" data-rulestype="[""]" data-limit="" data-exactlimit="" data-minimumlimit="" data-image="" data-imagec="" data-imagep="" data-imagel="" data-image-variations="[]" value="valueKBO_0">
<span class="tc-label-wrap">
<span class="tc-label tm-label">
some text
</span>
</span>
</label>
</li>
</ul>
</div>
型
我尝试了各种方法,但似乎都不起作用。我希望有人能帮助我。
我试着用下面的代码来帮助我解决问题。当我取消隐藏复选框的时候。这很有效.tm-extra-product-options .bloesems-div ul.tmcp-ul-wrap.tm-extra-product-options-checkbox li.tmcp-field-wrap label input[type="checkbox"]:checked { accent-color: red; }
个
我还尝试了代码:.tm-extra-product-options .tm-epo-field-label:has(input[type:“checkbox”]:checked){ background:#C6FA99; }
要尝试更改包含复选框的类的背景色.
2条答案
按热度按时间t1rydlwq1#
你在最后一行中遇到的一个问题是它应该是
[type="checkbox"]
,而不是[type:"checkbox"]
。这应该是可行的:
字符串
cnh2zyt32#
你的这个。我保留了你的代码,只是添加了两行css。虽然我需要删除你在html中没有提供的父元素的类。这应该对你有用。
个字符