Change radio button outline on :focus from square to circle

[adamerose]

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]

why don't you use

.radio:focusd {
  border-radius: 50%;
}

would'nt it work?

[adamerose]

@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

[shagungarg0]

can i work on this issue??

[u0nel]

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

[adamerose]

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

[kognise]

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.

[kognise]

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.

[asrvd]

can't we just remove the shadow, it's not like it's something very important.

[adamerose]

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.

[asrvd]

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.

[u0nel]

how? checked is not the same as focused.

[SUJAL8]

Please assign this issue to me.

[lunarfusion]

@kognise See if my solution works for you. https://github.com/kognise/water.css/pull/316

[JuiPuranik]

Im intrested in working on this issue. could you please assign this issue to me?