How do I disable radio button focus effect

[totuslink]

Hi, thank you so much for this wonderful plugin. I encounter a problem and stuck there with no luck.
I had already tried this method: tailwindlabs/tailwindcss-custom-forms#37

This is the current code

<div class="mt-2">
  <label class="inline-flex items-center">
    <input
      type="radio"
      class="form-radio focus:shadow-none focus:outline-none focus:bg-opacity-0"
      name="privacyType"
      value="private"
    />
    <span class="ml-2">Private</span>
  </label>
  <label class="inline-flex items-center ml-6">
    <input
      type="radio"
      class="form-radio focus:shadow-none focus:outline-none focus:border-transparent"
      name="privacyType"
      value="public"
    />
    <span class="ml-2">Public</span>
  </label>
</div>

Goal: Want to disable this focus ring

[RobinMalfait]

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.

[totuslink]

@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?

[namrog84]

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

[fl1k]

Have same issue.

[fl1k]

fixed with focus:ring-offset-0