wordpress CSS -选中复选框时更改标签背景颜色的问题

dldeef67  于 5个月前  发布在  WordPress
关注(0)|答案(2)|浏览(56)

我有一个网站上的问题.几年前,我安装了一个插件添加一些额外的选项到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; }
要尝试更改包含复选框的类的背景色.

t1rydlwq

t1rydlwq1#

你在最后一行中遇到的一个问题是它应该是[type="checkbox"],而不是[type:"checkbox"]
这应该是可行的:

label:has(input[type="checkbox"]:checked){
   background: #C6FA99;
}

字符串

cnh2zyt3

cnh2zyt32#

你的这个。我保留了你的代码,只是添加了两行css。虽然我需要删除你在html中没有提供的父元素的类。这应该对你有用。

ul.tmcp-ul-wrap.tm-extra-product-options-checkbox li.tmcp-field-wrap .tc-label.tm-label:hover {
            background:#9FC649;
        }

        ul.tmcp-ul-wrap.tm-extra-product-options-checkbox li.tmcp-field-wrap .tc-label.tm-label:active {
            background:#C6FA99;
        }
        ul.tmcp-ul-wrap.tm-extra-product-options-checkbox li.tmcp-field-wrap .tm-epo-field-label .tmcp-checkbox{
            display: none;
        }

        ul.tmcp-ul-wrap.tm-extra-product-options-checkbox li.tmcp-field-wrap .tm-epo-field-label .tmcp-checkbox:checked ~ .tc-label-wrap .tc-label {
            background-color:#9FC649;
        }

个字符

相关问题