Thymeleaf breaks :checked css 样式更改

Question

我使用此处 [1] 中的一些代码实现了带有复选框的树。

树本身没有任何问题。然后我添加了 thymeleaf 标签以在提交外部表单时获取复选框：

<input type="checkbox" th:id="'cb_' + *{cellline.key}"/>
<label>
    <input type="checkbox" form="covariate_form" th:field="*{interfaceCommand.celllines}" th:value="*{cellline.key}"/>
<span></span>
</label>
<label th:for="'cb_' + *{cellline.key}" th:text="${cellline.key}"></label>

这在 th:block 中被调用了几次。

css所以显示对勾是（来自[1]）：

.acidjs-css3-treeview label input:checked + span::before{
    content: "14"; /* Checkmark */
    box-shadow: 0 0 2px rgba(0, 0, 0, .25) inset;
    opacity: 1;
}

css 输入（应该）看到带有 th:fied=interfaceCommand.. 的输入被选中，然后将内容设置为 \2714（一个复选标记）。

问题是 thymeleaf 会为某些内部处理生成另一个输入：

<label>
    <input form="covariate_form" type="checkbox" value="22Rv1" id="celllines2" name="celllines">
    <input type="hidden" name="_celllines" value="on"><span></span>
</label>

在第三行你可以看到thymeleaf生成的隐藏输入。这个隐藏的输入打破了 css (input:checked) selector 并且复选框没有被选中。因为 :checked css selector 仅适用于前一个元素。

可能有几种解决方案，包括在检查上一个时将隐藏设置为检查（但这可能会破坏 thymeleaf 形式的东西），或者以某种方式禁用隐藏输入（这会破坏 thymeleaf 的东西）。没有隐藏的输入行，一切都没有问题。

为了尝试一切，我创建了一个 jsfiddle [2] （此处缺少 selected 下方自动 select 复选框的 javascript 代码）

[1] http://experiments.wemakesites.net/css3-treeview-with-multiple-node-selection.html

[2]https://jsfiddle.net/Lnwoz21e/3/

Answer 1

实际答案

您可以将 label input:checked + span::before select 或替换为 label input:checked ~ span::before 以使其正常工作。 + selector 基本上 select 所有 span::before 都紧接在选中的输入之后。然而，~ 只会 select 每个 span::before 前面有一个选中的输入元素。这意味着在 "orig" 输入复选框和跨度之间可以有 one/many 个其他元素。

有关 css select 或

的更多信息，请参阅 https://www.w3schools.com/cssref/css_selectors.asp。

检查更新后的 jsFiddle：https://jsfiddle.net/Lnwoz21e/7/

其他问题

ID 应该始终是唯一的。

The id global attribute defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).

在您的情况下，多次使用 id 会破坏树视图的功能（打开和关闭节点）。

Thymeleaf breaks :checked css 样式更改

Thymeleaf breaks :checked css style change

html

css

thymeleaf

checked

实际答案

其他问题