water.css
water.css copied to clipboard
kognise
Change radio button outline on :focus from square to circle
Ideally this teal border should be circular:
It looks to me like water.css is using a box-shadow in place of outline for the focus styling like described here, but this doesn't seem to work on radio buttons. The only work around I found was this answer with -webkit-appearance: inherit; but this breaks the radio button appearance and requires some manual restyling.
So I'm looking for discussion here on alternatives or viability of -webkit-appearance: inherit; before I make a PR.
@rerfan24 border-radius doesn't work on box shadows, which is what water.css uses for the blue outline. If you inspect the radio button on the water.css demo page you can see it already does have this style but is not rounded:
input[type=radio] {
border-radius: 100%;
}
The 2nd link in the OP is a jsfiddle showing this too
If you inspect the radio button on the water.css demo page you can see it already does have this style but is not rounded
It works with Firefox on Linux
If you inspect the radio button on the water.css demo page you can see it already does have this style but is not rounded
It works with Firefox on Linux
It's round for me too on Windows Firefox. It's square on Chrome and Edge
That's super weird, if anyone wants to make a PR I'll merge ASAP. Otherwise I can try to find time and fix this myself.
Did some snooping around - I have absolutely no idea how to fix this. Gonna consider bring fully custom checkboxes back in a major 3.0 release.
can't we just remove the shadow, it's not like it's something very important.
can't we just remove the shadow, it's not like it's something very important.
Having a visual indicator that an item is focussed is important for users who use the tab key to cycle through inputs instead of using a mouse.
can't we just remove the shadow, it's not like it's something very important.
Having a visual indicator that an item is focussed is important for users who use the tab key to cycle through inputs instead of using a mouse.
It's quite easy to distinguish between a focused radio button and non focused one without an outline too.
@kognise See if my solution works for you. https://github.com/kognise/water.css/pull/316
Im intrested in working on this issue. could you please assign this issue to me?
