Inspect the working example
The fieldset has two labeled text inputs. A separate input sits outside. focus-within changes the group border, while the input’s own focus indicator remains available.
| Case | Input or inspection | Result and meaning |
|---|---|---|
| Title focus | Focus title | Group matches :focus-within; green |
| Summary focus | Focus summary | Group still matches; green |
| Outside focus | Focus outside | Group no longer matches; gray |
Follow the browser mechanism
:focus-within matches an element when it or a relevant descendant is focused. :focus alone is a different condition. This is one selector mechanism, not the existing end-to-end keyboard acceptance journey.
Container :focus does not follow child focus
The alternative replaces focus-within with focus on the same fieldset.
<style>body{margin:8px}</style>
<style>fieldset{border:3px solid rgb(140,140,140)}fieldset:focus{border-color:rgb(0,80,40)}</style><fieldset><legend>Workshop note</legend><label>Title <input id="title" type="text"></label></fieldset>Focusing Title does not focus the fieldset itself, so the group stays gray.
Try the repair
Does a green group border replace the need for visible focus on the actual control?
Show the worked answer
No. It identifies the group, not the exact control. Keep and test the input focus indicator separately.
- Check activeElement and group border for all three fields.
- Keep the native field label and focus indicator.