Join GitHub today
GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.Sign up
Give radio + checkboxes same input/label markup hierarchy #22840
I'm not a developer, so forgive me if I'm doing it wrong.
Describe the bug
But the terms checkbox has the label with the input inside of it, as a child element:
This is inconsistent, confusing, and makes it difficult to style radio buttons and checkboxes in a consistent way. In my experience the radio button method (sibling elements) is the more common method, and preferred. Please fix the terms checkbox (and any others), by moving the input element above the label, as a sibling.
The Storefront theme uses a :before element on the radio buttons to style them. It could use a simpler "input[type=radio] + label:before" to select all radio buttons and give them a consistent style, but then you couldn't use the same for the checkboxes, because of their altered structure.
In fact, it's impossible with current CSS (I believe) to select this properly, because there's no "has child" selector, to select all labels that have a checkbox/radio input child. It makes it much more complicated to display custom checkboxes and radio buttons.
Isolating the problem (mark completed items with an [x]):
On more investigation: I believe it's actually impossible with current CSS to insert a custom checkbox/radio when the input is nested inside the label (like the terms checkbox) because we can't style the :checked pseudo-class of a parent label.
And we can't insert the :before pseudo-class with the custom checkbox/radio onto the input itself. That breaks standards. It works in Chrome, but shouldn't, and doesn't work in FF and Safari.
So best solution is ALWAYS put the input as a sibling element, before the label.
@tevyaw I took a quick look at current usage of radios + checkboxes. Whilst you're right radios are not marked up in the same way as checkboxes, all radios are consistent with radios, and all checkboxes are consistent with checkboxes.
Since changing one of the other would break current implementations/themes I don't think we should update this. But we should ensure they are flexible enough to be styled.
Since they are different input types, they may be similarly styled but both required different handling anyway. Also the inconsistency itself between radio and checkbox has nothing to do with the ability to style either as your issue suggests.
It's true you cannot style the parent element, however, all checkboxes have this format:
So you can style these with
I'd go that route; changing the markup won't be possible without a major release due to disrupting existing styling in themes. Let me know if any of the above isn't clear/does not work.
Hi Mike. Thank you for the thoughtful and detailed reply. I actually realized that same thing after my last comment above and was able to update my CSS to reflect that. But I forgot to come back here and update this issue.
I still think the ideal would be consistency between the two, since they're displayed in similar ways. But I completely understand why you wouldn't want to change that, and break it for everyone who's written CSS, etc based on the current structure. Thanks again.