How to remove outline from Input when focus?

[alamenai]

I have an Input and I want to remove the outline when I focus:

This is my current code :

  <Input
              className='p-6 pl-12 pr-24 focus-visible:outline-transparent placeholder:text-white/40 absolute bg-black/50 backdrop-blur-3xl border-transparent outline-none left-0 right-0 rounded-full focus-visible:ring-transparent focus-visible:border-transparent focus:ring-transparent focus:border-transparent'
              placeholder='Wohin reisen Sie in Deutschland?'
              value={address}
              onChange={(e) => setAddress(e.target.value)}
            />

[codesfromshad]

Might want to provide a bit more context. I can't seem to get the white ring when I focus with your tw-classes.

[alamenai]

Hi @codesfromshad ,

Yes, using the provided code, as you see in the input when I focus I can still see white outline around the input while I don't want to see it.

[incpo]

focus-visible:outline-none

[alamenai]

It remains the same:

 <Input
                className='p-6 pl-12 pr-24 focus-visible:border-none focus-visible:outline-none placeholder:text-white/40 absolute bg-black/50 backdrop-blur-3xl border-transparent outline-none left-0 right-0 rounded-full'
                placeholder='Wohin reisen Sie in Deutschland?'
                value={address}
                onChange={(e) => setAddress(e.target.value)}
              />

[AyushShivhare79]

Use focus-visible:ring-0 @alamenai