News for hackers. Stuff that matters.

A comment on Sanding UI. Parent comment

Re:Sanding UI by dmix on Saturday September 21, 2024 @10:21PM (#41614186)
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/

[ Parent | on HN ]
Re:Sanding UI by parasti on Sunday September 22, 2024 @06:29AM (#41616085)
They 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.
[ Parent | on HN ]
Re:Sanding UI by abdusco on Sunday September 22, 2024 @06:29AM (#41616088)
I 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) {}
[ Parent | on HN ]
Re:Sanding UI by Ciantic on Sunday September 22, 2024 @10:51AM (#41617480)
Incidentally 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.
[ Parent | on HN ]