Question 342746 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Why do all input feilds now have a blue outline after installing flowbite?

I recently installed flowbite-react to my react app and now all input fields across my whole app have a blue outline when focused. Even when I apply styles to remove the outline, nothing seems to work.

Everything installed properly and I added the config and plugin to tailwindcss.

Is this an issue anyone has encountered?

Tags:

2

Answers


  1. 0

    You’ve done nothing wrong and it is working as expected!! When you install a resource like flowbite then their default styles are applied. (you can see this in the package or a simple inspect)

    The blue outline you’re seeing is due to the default focus styles applied by Flowbite-React or Tailwind CSS. One way to remove this outline is by using the outline-none utility class provided by Tailwind CSS. Here’s how you can apply it to your input fields:

    <input
  type="text"
  className="outline-none"
  placeholder="Enter text..."
/>

    OR Override with css

    if choosing this route make sure you import 'path/styles.css' in the main wrapper, body or desired component (path should be replaced with your own relative path to the file below)

    /* styles.css */
.input:focus {
  outline: none !important;
}

    PS !important is not needed unless the changes are still being overridden by the resource – if you add !important it will make sure to override any other input:focus outline attributes

    Login or Signup to reply.
  2. 0

    It seems like Flowbite overrides all input fields’ focus outline color in the DOM. If you want to stop it, you have to override the CSS property of outline in all input fields with the "important" keyword.

    input:focus {
  outline: none !important;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search