Remove the outline in input

[Ghoral]

Hi, How can I remove the outline in input when focused?

Thank you.

[dan5py]

Hi @Ghoral, you can add the focus-visible:ring-0 classname to the <Input> component. This will disable the focus ring just for a single instance.

If you want to remove it from all Input you can remove all the classnames that start with focus-visible: in the input.tsx file.

[Ghoral]

Thank you for quick response.

[VadBe]

focus-visible:ring-transparent works better for me.

[lisaspotty]

focus-visible:ring-transparent works better for me.

same solution as u 🍭

[MimmyJau]

Neither focus-visible:ring-0 nor focus-visible:ring-transparent seem to be working for me. Anyone else?

[reinaldo-vombo]

<Input type="email" className="bg-transparent border-0 border-b-2 border-gray-500 px-6 py-8 focus-visible:ring-offset-0 focus-visible:ring-0" placeholder="Email" /> do this

[abhishek61067]

You can remove the classname: focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 from input component provided by the shadn in components/ui/input.jsx.

<input
      type={type}
      className={cn(
        "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none  disabled:cursor-not-allowed disabled:opacity-50",
        className
      )}
      ref={ref}
      {...props} />

i am directly changing from the component provided by shadcn to preserve the consistency in your project.

[Jervx]

this works for me

focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0

[tonyljx]

focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0

thank you ! it works!!!!!!

[Garvit1809]

how do we do this in select component. Tried many things but none is working ;(

[pedrogrigorio]

how do we do this in select component. Tried many things but none is working ;(

Just use "focus:" instead of "focus-visible", like this:

<Select>
  <SelectTrigger className="w-[180px] focus:ring-offset-0 focus:ring-0">
    <SelectValue placeholder="Select a fruit" />
  </SelectTrigger>

  <SelectContent>
    <SelectGroup>
      <SelectLabel>Fruits</SelectLabel>
      <SelectItem value="apple">Apple</SelectItem>
      <SelectItem value="banana">Banana</SelectItem>
      <SelectItem value="blueberry">Blueberry</SelectItem>
      <SelectItem value="grapes">Grapes</SelectItem>
      <SelectItem value="pineapple">Pineapple</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

You can also verify what properties your component uses opening the file that shadcnui creates (like select.tsx).

[nightmare14226]

I tried it but the ring is visible yet when the select trigger is closed.

[ParshvLimbad]

focus-visible:ring-[none] worked for me

[vekaev]

tabindex=-1