Блог

Главная - Вопросы по программированию - Tailwind показывает заполнитель на границе ввода при фокусировке

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

#css #tailwind-css

#css #tailwind-css

Вопрос:

Я пытаюсь создать форму, используя 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"

    />

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

введите описание изображения здесь

Комментарии:

1. Tailwind, безусловно, может помочь вам в этом, но вам также понадобится немного JS. У Tailwind есть дополнение к форме, но оно не делает это случайно tailwindcss-custom-forms.netlify.app Этот шаблон фокусировки ввода является частью material design, если я не ошибаюсь.

Ответ №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="contact@gmail.com" />

Или

 <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="contact@gmail.com" />
 
 @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="contact@gmail.com" />
</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="contact@gmail.com" />
</div>