How do I disable radio button focus effect about tailwindcss-forms HOT 5 CLOSED

fixed with focus:ring-offset-0

from tailwindcss-forms.

Hey! Thank you for your question!
Much appreciated! 🙏

Internally we use the ring utilities, you can apply those to change the style you want.
Example: https://play.tailwindcss.com/9a17lSTOTp

I essentially added this focus:ring-transparent, keep in mind that this is very bad for accessibility, so I would recommend to play with the ring utilities until you find something that matches the design and your likings.

from tailwindcss-forms.

I am trying to solve this too and was able to get rid of most things

The little 'white dot' in the middle I was able to remove by adding

.form-radio:checked
{
  background-image: none;
}

[type='radio']:checked
{
  background-image: none;
}

to my index.css (where I import the tailwind stuff).

However I just can't get rid of the white circle, I've gone thru the inspected elements dozens of times

Happens when I click and hold, or have recently clicked on something.

What's strange is I don't see it happen

from tailwindcss-forms.

@RobinMalfait Sorry for the late reply, I still failed on this problem. I adjust your tailwind css play to indicate the problem.

https://play.tailwindcss.com/7b7oE90unh

You can see a white ring around the radio selection when you first select it, once your mouse click elsewhere, it will disappear. Is there any method to style this white ring?

from tailwindcss-forms.

Have same issue.

from tailwindcss-forms.