2 ms·
Bootstrap moved from <label><input></label> in 4.0 to <input> + <label> in 5.0 for radios/checkboxes [1]. I was curious about why but my guess is that it adds s
by dmix 2y ago
Bootstrap moved from <label><input></label> in 4.0 to <input> + <label> in 5.0 for radios/checkboxes [1]. I was curious about why but my guess is that it adds some simplicity for theming when repositioning/padding either the label or input.
[1] https://getbootstrap.com/docs/5.3/forms/checks-radios/ https://getbootstrap.com/docs/5.3/forms/checks-radios/
- parasti 2y agoThey more than likely made that decision to be able to style the label based on input state using the + sibling selector. I use that trick for literally every visible input now.
- abdusco 2y agoI think it's for material design inspired focus animations. :has selector wasn't a thing, so you have to use + sibling selector to target the label of a focused input input:focus + label {} label:has(input:focus) {}
- Ciantic 2y agoIncidentally Bootstrap 5.3 seems to have the same problem as the article describes. There is a gap which doesn't do anything if clicked, right between the radio button and the label.