Search code examples
htmlcssformstailwind-cssflowbite

Flowbite overriding/changing input field CSS

I am currently using Flowbite CDN and Tailwind CDN on my project. I used a Flowbite component carousel but somehow it also changed my input element classes. The third input field somehow is not changed, only the first and second.

<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.5/flowbite.min.css" rel="stylesheet" />

<form class="flex flex-col gap-3 mt-5 relative" action="">

  <label class="font-semibold" for="username">Name</label>

  <input class="border-b-2 pr-3 pt-3 outline-none" type="text" id="username" required />
  <label class="font-semibold" for="emailOrPhoneNumber">Email/Phone number</label>

  <input class="border-b-2 pr-3 pt-3 outline-none" type="text" id="emailOrPhoneNumber" required />
  <label class="font-semibold" for="help">What can we help you with?</label>

  <input class="border-b-2 pr-3 pt-3 outline-none" id="help" />
  <input type="submit" class="absolute top-72 right-1 bg-blue-500 text-white px-5 py-3 rounded-md w-1/4 mt-3 hover:cursor-pointer hover:bg-cyan-300 duration-150">

</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.5/flowbite.min.js"></script>

Screenshot

I tried searching online but I could not find any solutions.

Solution

  • <input> elements with certain type attribute values are styled by Flowbite. Thus, your third <input> element does not get styled by Flowbite since it does not have a type attribute.

    You could consider overriding the Flowbite styling on the other <input> elements as needed, something like:

    <script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.5/flowbite.min.css" rel="stylesheet" />

<form class="flex flex-col gap-3 mt-5 relative" action="">
  <label class="font-semibold" for="username">Name</label>
  <input class="border-0 border-b-2 border-gray-200 p-0 pr-3 pt-3 outline-none focus:ring-0 focus:border-gray-200" type="text" id="username" required />
  <label class="font-semibold" for="emailOrPhoneNumber">Email/Phone number</label>
  <input class="border-0 border-b-2 border-gray-200 p-0 pr-3 pt-3 outline-none focus:ring-0 focus:border-gray-200" type="text" id="emailOrPhoneNumber" required />
  <label class="font-semibold" for="help">What can we help you with?</label>
  <input class="border-b-2 pr-3 pt-3 outline-none" id="help" />
  <input type="submit" class="absolute top-72 right-1 bg-blue-500 text-white px-5 py-3 rounded-md w-1/4 mt-3 hover:cursor-pointer hover:bg-cyan-300 duration-150">
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.5/flowbite.min.js"></script>