jeudi 24 janvier 2019

Pure CSS Checkbox button with no label

I'm trying to replace a checkbox and make it into a button. I've done this before, but for this site I'm using Easy Digital Downloads Front End Submissions. I've searched and searched, also gone through multiple posts here on the site.

I don't know how this was made, but I can't seem to wrap my head around it as the label seems to come before the class. It has this selectit class I've been trying to mess around with, but whatever I do I can't make a button.

When I try something like input[type=checkbox] + label it doesn't actually affect anything. Other examples would be .selectit input[type=checkbox]:before This one works. As well as .selectit input:checked:after But again, I can't add anything with + label it seems.

Well I can make one that has a hover, but not one with a checked state and a color change for example.

I should note that I cannot change any HTML. The way the checkbox is built, I have to stick with, so I'm trying to make a pure CSS solution.

Here's the HTML for the checkboxes. I only really want the parent checkbox to be affected by the hover and checked state.

<ul class="fes-category-checklist">
  <li id="download_category-156" data-open="false" style="display: list-item;"><label class="selectit"><input value="156" type="checkbox" name="download_category[]" id="in-download_category-156"> 2D Assets</label>
    <ul class="children">

      <li id="download_category-183" data-open="false"><label class="selectit"><input value="183" type="checkbox" name="download_category[]" id="in-download_category-183"> Motion Graphics</label></li>

      <li id="download_category-163" data-open="false"><label class="selectit"><input value="163" type="checkbox" name="download_category[]" id="in-download_category-163"> HDRI</label></li>

      <li id="download_category-162" data-open="false"><label class="selectit"><input value="162" type="checkbox" name="download_category[]" id="in-download_category-162"> Materials</label></li>

      <li id="download_category-161" data-open="false"><label class="selectit"><input value="161" type="checkbox" name="download_category[]" id="in-download_category-161"> Textures</label></li>
    </ul>
  </li>
</ul>

I hope someone has some answers Thanks!




Aucun commentaire:

Enregistrer un commentaire