Select Parent if Input Checked

HTML-CSS
1

I’m trying to make a list item that has a check mark button in it. I want to make it so that if the check mark is checked the text recieves a text decoration of line through. I want to achieve this with pure css and no javascript. Here is how the list element looks


<div class="ItemContainer">
              <span class="text">Text to be changed</span>
              <div class="iconContainer">
                <div class="checkbox"><label id="check"><input type="checkbox" id="checkbox" checked="false"><span class="label-text"></span></label></div>
              </div>
            </div>
2

Is there some reason for this? This would be so much simpler with JS I think.

1 Like
3

I guess not, I just don’t wanna bother with javascript

4

This is possible. I’ve edited your code a little bit for clarity, but this is just to get what you want accomplished (note that I have changed the place of your label and input tags.

<div class="ItemContainer">
  <div class="iconContainer">
    <div class="checkbox">
       <input type="checkbox" class="strike">
       <label id="check" class="strike">Text to be changed</label>
     </div>
   </div>
</div>

And here is the CSS for it

input[type=checkbox]:checked + label.strike {
  text-decoration: line-through;
}

I do feel I should suggest that you should also relook at your naming conventions and what appears to be unneeded HTML tags. First, capitalizing your classes is not a best practice and can be confusing. Further, you have camel cased other classes which is more confusing. You also have extra span tags which appear unnecessary, but this is only in the context of the code you have posted here.

1 Like
5

Thank You @pineappbill. Your solution is the right approach to use for achieving what I have mentioned above, but because of how I have built my webpage this approach will not work for me as the text has to be outside and before the input checkbox. As for the classes, I always use camelCase for my class names as it makes it easier for me to find items and I can have more detailed names. The first class name should have been itemContainer and not ItemContainer.
P.S: I just copy pasted the code from my webpage, so it looks a bit rough but I am using the extra span element to hide the original checkbox and have my own custom checkbox.

I have now decided to take the Javascript Approach for this sake of this problem