@MaelkMark
Posted
The radio buttons don't get skipped, you just can't see the outline because you've set their outline to transparent. If you remove that declaration, the styling won't change and you'll see the outline on focus. Or if you want the whole label to have a focus, keep the outline style for the input and declare a new rule: label:has(input[type="radio"]):focus and put the focus styling there.
(Also, you can toggle between the two radio buttons by pressing the up/down arrow keys)
Anyway, nice solution :)
Marked as helpful
@zeynabmvs
Posted
@MaelkMark Hi, Thanks a lot I fixed it, I'm using tailwind for styling, so I added these classes to label to make the whole label focused instead of just the radio: "focus-within:outline focus-within:outline-2 focus-within:outline-slate-700"
