我有以下CSS类：

.genre_element {
    background-color: none;
}

div.genre_element:has(input[type="checkbox"])::before {
    content: "\002B";
    transition: transform .3s ease-in-out;
}

div.genre_element:has(input[type="checkbox"]:checked) {
    background-color: #ff9400;
    transition: all .2s;
}

div.genre_element:has(input[type="checkbox"]:checked)::before {
    content: "\2713";
    transform: rotate(-360deg);
    transition: transform .3s ease-in-out;
}

这应该显示一个勾选标记unicode字符，并添加一个背景色到输入，只要他们被选中，并添加一个加号字符时，他们被取消选中时，他们会自动恢复到我在genre_element {}类中设置的颜色，这是none。
这个功能在Edge、Chrome和Opera中都能正常工作，但在Firefox中却无法正常工作。我使用caniuse.com来检查类的浏览器兼容性，并启用了layout.css.has-selector.enabled标志。这修复了部分问题，因为它显示了选中按钮时按钮所需的正确样式，但我无法取消选中它们。单击它们没有任何效果。
以下是按钮的父div在启用标记之前的样子：

这是启用标志后的外观;取消选中不起作用：

这是他们在Chrome，Edge和Opera中取消选中后的样子（预期结果）：

由于启用该标志会导致按钮看起来像是处于选中状态，我假设Firefox支持::before和:checked（这与www.example.com上的信息相对应caniuse.com，我可以通过查看开发人员控制台来确认），但其他原因导致按钮在Firefox中无法正常工作。
作为最后的手段，我尝试添加这个伪类来检查checked条件的否定：

div.border_div_in_scrollbox:has(input[type="checkbox"]:not(:checked)) {
    background-color: none;
    transition: all .2s;
}

但这并没有解决问题。
P.S.：在玩了一段时间之后，我让firefox显示了想要的状态，但是它有很多错误。只有在我从开发者控制台用选择器工具选择输入之后，在我取消选中它之后，它才改变到它应该有的状态，但是它根本不一致。这是它看起来的样子（我让原始输入再次可见，以使调试更容易）：