4 ms·

Ok, this is a great hack - but what would one practically use this for ? I mean the standard checkbox hack works too right ? Or is there some place where this t

• deleted 5y ago
  [deleted]
• inopinatus 5y ago
  There are two bonus capabilities from using the form:valid hack: 1. The input element(s) can now be anywhere on the page. You can, for example, use adjacency to style a control button, without torturing your HTML to squeeze the button into being a sibling of whatever it's activating. 2. You can use form:valid as a parent selector i.e. as a wrapper element. You couldn't use an input:checked as a parent selector because the <input> element's content model is "nothing" i.e. there are no child elements under an <input>, but you sure can with a <form>. The result is less brittle to code-rot. This is extremely freeing and allows you to use, for example, a :checked adjacency for styling an activation button and a wrapper element (a form:valid) for the large complex component (modal? drop-down? slideover? video content?) that it activates. Heck, it can even be an iframe. Here's the bones of an example: https://codepen.io/inopinatus/pen/vYxrOeR?editors=1100 https://codepen.io/inopinatus/pen/vYxrOeR?editors=1100 There are two downsides: 1. Behaviour of some elements is different inside a <form>. Most obviously, don't nest a <form> inside with the same scope. 2. Your HTML maybe become a mess of scattered <form>, <input>, and <label> elements that many other developers will look at and say "WTF was this person thinking" and "what does this button do?"
• eyelidlessness 5y ago
  I would use it where I don’t have full control over the document structure (for example where my checkbox can’t sibling select because something third party wraps it in a div).