Попутный ветер показывает заполнитель на границе ввода, когда он сфокусирован

Я пытаюсь создать форму с помощью Tailwind для проекта. Для этого проекта мне нужно создать определенный тип поля ввода. Когда это поле находится в фокусе, местозаполнитель этого поля должен изменить положение поверх границы ввода. Возможно ли это с помощью Tailwind?

Это мой код для ввода, который я использую:

<input
      type = "text"
      name = "email"
      id = "email"
      v-model = "email"
      placeholder = "Email address"
      class = "my-2 px-4 py-2 border rounded-lg text-gray-700 focus:outline-none text-sm"

    />

Это пример того, как должен отображаться ввод, когда он находится в фокусе:

Tailwind, безусловно, может помочь вам в этом, но вам также понадобится немного JS. У Tailwind есть аддон формы, но, к сожалению, он его не делает

— 15.12.2020 09:00

css tailwind-css

14.12.2020 15:39

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

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

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

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

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

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

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

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

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

2 892

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

Ответы 1

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

Вы можете использовать :

<div class = "relative z-0  px-2 w-full group">
<label for = "first_name" class = "font-mono uppercase font-bold  text-[11px]  text-gray-900 dark:text-gray-300
bg-white relative px-1  top-2 left-3 w-auto group-focus-within:text-red-600 ">
Email Address 
</label>
<input type = "email" name = "first_name" id = "first_name" class = "h-8 text-10  bg-gray-50 border py-55-rem border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
required = "" placeholder = "[email protected]" />

Или

<div class = "relative z-0  px-2 w-full group">
<label for = "first_name" class = "font-mono uppercase font-bold  text-11  text-gray-900 dark:text-gray-300
bg-white relative px-1 group-focus-within:top-2 top-7 left-3 w-auto group-focus-within:text-red-600 ">
Email Address 
</label>
<input type = "email" name = "first_name" id = "first_name" class = "h-8 text-[11px]text-10  bg-gray-50 border py-55-rem border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
required = "" placeholder = "[email protected]" />

@tailwind base;
@tailwind components;
@tailwind utilities;

<link href = "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel = "stylesheet">
<script src = "https://cdn.tailwindcss.com/3.0.23"></script>
<div class = "relative z-0 px-2 w-full group">
  <label for = "first_name" class = "font-mono uppercase font-bold text-11 text-gray-900 dark:text-gray-300 bg-white relative px-1 group-focus-within:top-2 top-7 left-3 w-auto group-focus-within:text-red-600"> Email Address </label>
  <input type = "email" name = "first_name" id = "first_name" class = "h-8 text-[11px]text-10 bg-gray-50 border py-55-rem border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
    required = "" placeholder = "[email protected]" />
</div>
<div class = "relative z-0 px-2 w-full group">
  <label for = "first_name" class = "font-mono uppercase font-bold text-[11px] text-gray-900 dark:text-gray-300 bg-white relative px-1 top-2 left-3 w-auto group-focus-within:text-red-600"> Email Address </label>
  <input type = "email" name = "first_name" id = "first_name" class = "h-8 text-10 bg-gray-50 border py-55-rem border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
    required = "" placeholder = "[email protected]" />
</div>

03.03.2022 12:12

Другие вопросы по теме

TailwindCSS — исправлена полная ширина div родителя flex

Использование TailwindCSS с Symfony Webpack Encore

Почему моя функция в html-коде не вызывается?

Неизвестно в правиле @tailwind css (unknownAtRules)

Как я могу добиться цвета текста rgba (0, 0, 0, 0,54) попутного ветра css?

TailwindCSS: Как добавить элементы с правой стороны в сетку?

Как выровнять элементы по центру в Tailwind?

Как динамически изменить имя класса CSS в React

Как правильно реализовать инициализацию Alpine.js и Phoenix 1.7 с LiveView 0.18.3?

Tailwind CSS не показывает изменения. [Реакция + Tailwindcss]

Попутный ветер показывает заполнитель на границе ввода, когда он сфокусирован

Ответы 1

Другие вопросы по теме

Похожие вопросы