Переопределение/изменение поля ввода Flowbite CSS

В настоящее время я использую Flowbite CDN и Tailwind CDN в своем проекте. Я использовал карусель компонентов Flowbite, но каким-то образом это также изменило мои классы элементов ввода. Третье поле ввода как-то не изменено, только первое и второе.

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

Я пытался искать в Интернете, но я не мог найти никаких решений.

html css forms tailwind-css flowbite

01.05.2023 16:07

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Элементы <input> с определенными значениями атрибута type стилизуются Flowbite. Таким образом, ваш третий элемент <input> не стилизуется Flowbite, поскольку у него нет атрибута type.

Вы можете переопределить стиль Flowbite для других элементов <input> по мере необходимости, например:

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

большое спасибо, ваше решение сработало. Я также узнал о стиле Flowbite <input> с его определенными типами.

— 02.05.2023 13:27

01.05.2023 16:30