聚焦时顺风显示输入边框上的占位符

Question

我正在尝试使用 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"

    />

这是输入框被聚焦时应如何显示的示例：

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

聚焦时顺风显示输入边框上的占位符

Tailwind show placeholder on border of input when focused

css

tailwind-css