title: Thymeleaf breaks :checked css style change
body: <p>I implemented a tree with checkboxes with some code from here [1].</p>
  
  <p>The tree itself worked without any problems. I then added thymeleaf tags to get the checked boxes when the outer form is submitted:</p>
  
  <pre><code>&lt;input type="checkbox" th:id="'cb_' + *{cellline.key}"/&gt;
  &lt;label&gt;
      &lt;input type="checkbox" form="covariate_form" th:field="*{interfaceCommand.celllines}" th:value="*{cellline.key}"/&gt;
  &lt;span&gt;&lt;/span&gt;
  &lt;/label&gt;
  &lt;label th:for="'cb_' + *{cellline.key}" th:text="${cellline.key}"&gt;&lt;/label&gt;                                
  </code></pre>
  
  <p>This gets called a few times inside a th:block.</p>
  
  <p>The css so show the checkmark is (from [1]):</p>
  
  <pre><code>.acidjs-css3-treeview label input:checked + span::before{
      content: "\2714"; /* Checkmark */
      box-shadow: 0 0 2px rgba(0, 0, 0, .25) inset;
      opacity: 1;
  }
  </code></pre>
  
  <p>The css input (should) see that the input with the th:fied=interfaceCommand.. is checked and then set the content to \2714 (a checkmark).</p>
  
  <p>The problem is that thymeleaf generates another input for some internal handling:</p>
  
  <pre><code>&lt;label&gt;
      &lt;input form="covariate_form" type="checkbox" value="22Rv1" id="celllines2" name="celllines"&gt;
      &lt;input type="hidden" name="_celllines" value="on"&gt;&lt;span&gt;&lt;/span&gt;
  &lt;/label&gt;
  </code></pre>
  
  <p>In the third line you can see the hidden input which was generated by thymeleaf. This hidden input breaks the css (input:checked) selector and the checkbox doesn't get checked. Because the :<strong>checked css selector only works on the previous element.</strong></p>
  
  <p>There could be several solutions, including setting the hidden  to checked when the upper one is checked (But that could break the thymeleaf form stuff), or somehow disable the hidden input (Which would break thymeleaf stuff). Everything works without problems without the hidden input line.</p>
  
  <p>To try everything out I created a <strong>jsfiddle</strong> [2]
  (The javascript code to automatically select checkboxes below the selected is missing here)</p>
  
  <p>[1] <a href="http://experiments.wemakesites.net/css3-treeview-with-multiple-node-selection.html" rel="nofollow noreferrer">http://experiments.wemakesites.net/css3-treeview-with-multiple-node-selection.html</a></p>
  
  <p>[2] <a href="https://jsfiddle.net/Lnwoz21e/3/" rel="nofollow noreferrer">https://jsfiddle.net/Lnwoz21e/3/</a></p>