我尝试使用React和Tailwind CSS创建一个注册表单,当我关注一个输入表单时,标签会向上滑动,直到这里都没有问题,但是当我关注另一个输入时,我之前关注的输入的标签变成了占位符,也就是说,刚刚向上移动的标签会回到原来的位置。我的代码如下:
<div className="relative mb-4">
<input
type="text"
id="username"
name="username"
value={formData.username}
onChange={handleChange}
className="peer p-3 h-10 w-full border-b-2 border-gray-300 text-gray-900 placeholder-transparent focus-within:outline-none focus-within:border-rose-600"
placeholder=""
required
/>
<label
htmlFor="username"
className={`absolute left-1 top-2 transition-all text-gray-400 ${formData.username.length > 0 ? 'text-md' : 'text-base'
} ${formData.username.length > 0 ? 'text-gray-400' : ''
} peer-focus-within:left-0 peer-focus-within:-top-6 peer-focus-within:text-gray-700 peer-focus-within:text-md peer-focus-within:text-bold`}
>
Username
</label>
</div>
截图
问题在第四张截图中清晰可见。我如何解决这个问题?提前感谢!
我尝试使用模板字符串和三元运算符执行一些检查,但我仍然无法解决它。
1条答案
按热度按时间lyr7nygr1#
请原谅我误解了你的问题,但似乎你希望它的标签停止改变其位置后,用户准备好了。目前,您的影响改变其位置是描述在
但是当焦点被移除时,问题就来了。在这之后,规则内的焦点就不适用了,原来的风格就取而代之了。
有几种方法可以解决这个问题。我建议你简化你的样式逻辑,按照用户名长度如下:
在转换更改后,类名将永久更改为相同的类名,因此不会再更改回来