Checkbox Strike Through Label When Checked
A couple of examples of how you can achieve a strike-through effect on the labels of checkboxes that are checked. Just a quicky in response to a post in the Bricks Community on facebook.
This is placed inside a Bricks Form with no other form elements so the CSS selectors do not account for any further components. Additional components would likely require an adjustment to the way these checkboxes are targeted (selected) in the CSS.
An alternative is to build the form yourself where you can be more precise in your selections. Other things you can do is to inspect the html on the rendered site and make note of the ul (Unordered List) that the checkbox items are contained within and target it that way.
The simple version
This version simply adds text-decoration = line-through to the label associated with the relevant checkbox.
The Fancier version
Here we use a pseudo element that replaces the line through. This pseudo element starts off with a width of zero but when the check box is checked, it expands to 100% of the label. Of course this could be adjusted so it was a little wider and you could perhaps, move it a little down/up and a slight rotation on it which may make it look a little more hand written (imperfect).
The Fanciest version...
This is something for another day in one of my YouTube tutorials. This would require an SVG image and a little animation to set up.
If this is something you would be interested in go subscribe to the channel and don’t forget to turn on the notifications as I will do a video on this or something like it to demonstrate it!
