How to Set text-decoration: line-through on Labels with Nested Inputs

Discover how to effectively use CSS to apply a `line-through` style to labels that contain nested input elements, enhancing your forms' visual feedback.
---
This video is based on the question https://stackoverflow.com/q/70523692/ asked by the user 'G T' ( https://stackoverflow.com/u/17791152/ ) and on the answer https://stackoverflow.com/a/70524141/ provided by the user 'A Haworth' ( https://stackoverflow.com/u/10867454/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: How set "text-decoration: line-through" style for a label that has inside an input element?

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/licensing
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/by-sa/4.0/ ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/by-sa/4.0/ ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Understanding the Challenge: Applying text-decoration: line-through to Labels

When designing forms with checkboxes, you might find yourself wanting to indicate that an item is completed or inactive. A common method is to strike through the label text when the associated checkbox is checked. However, applying a line-through style directly to a label with a nested input element presents a challenge. The goal is to have a clear and effective CSS solution for setting the text-decoration to line-through when the checkbox is checked.

The Problem with Existing CSS

Here's a simplified version of the code you're working with:

[[See Video to Reveal this Text or Code Snippet]]

It is essential to note that the original CSS rule you attempted is not effective:

[[See Video to Reveal this Text or Code Snippet]]

Why This Doesn't Work

CSS operates in a top-down manner, meaning it does not have the capability to apply styles to parent elements based on their child elements' states (like your checkbox being checked). This limitation necessitates an alternative approach to achieve the desired effect.

A Solution: Using Sibling Selectors

To get around this limitation, we can restructure the HTML slightly. The goal here is to use a span element to wrap the label's text, which allows us to use a sibling selector to apply the line-through style effectively.

Revised HTML Structure

Here’s how to modify the initial HTML to incorporate a span around the text within the label:

[[See Video to Reveal this Text or Code Snippet]]

Updated CSS Rules

With the adjusted HTML structure, you can now use the following CSS rule to achieve the desired line-through effect:

[[See Video to Reveal this Text or Code Snippet]]

Explanation of the CSS

Selector Usage: This line of CSS targets the span that directly follows the checked input element. The + selector allows us to apply styles based on the state of the checkbox.

Achieving the Effect: When the checkbox is checked, the associated text within the span will appear with a line through it, clearly indicating its status to the user.

Conclusion

By restructuring your HTML and leveraging sibling selectors in CSS, you can effectively apply a line-through style to a label's text associated with a checkbox input. This not only enhances the user experience but also keeps your forms visually appealing and functional. Experiment with this styling method in your projects to make your checkboxes more informative!

Видео How to Set text-decoration: line-through on Labels with Nested Inputs канала vlogize