我正在创建一个注册表单,但无法定位眼睛图标。最初,图标的位置正确,但当显示错误消息时,图标就会错位。
以下是一些显示该问题的屏幕截图以及我正在使用的代码。
另外,我不知道如何让错误消息图标变大。对于较长的错误消息,图标会变得太小。
这是我的代码:
<div className="mt-6">
<label htmlFor="password" className="block text-sm font-normal text-gray-700">
Contraseña
</label>
<div className="mt-1 relative">
<input
id="password"
name="password"
type={showPassword ? 'text' : 'password'}
autoComplete="current-password"
placeholder="Contraseña"
required
value={password}
onChange={(e) => setPassword(e.target.value)}
onBlur={() => handleBlur('password')}
className="block w-full appearance-none placeholder:text-xs rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-neutral-950 focus:outline-none sm:text-sm"
/>
<span
onClick={togglePasswordVisibility}
className="absolute inset-y-0 right-0 pr-3 flex items-center cursor-pointer justify-center"
>
{showPassword ? <VscEyeClosed /> : <VscEye />}
</span>
{passwordError && (
<p className="mt-2 text-xs text-red-600 flex items-center">
<TiWarning className="mr-1" /> {passwordError}
</p>
)}
</div>
</div>
我正在使用 Tailwind CSS,说实话,我对前端开发没有太多经验。对于后端开发人员来说,这就像一场噩梦!有人能帮我解决这些问题吗?
对于眼睛图标的定位:
我将其替换
inset-y-0
为top-3
以确保一致的对齐方式,因为inset-y-0
会根据输入的高度动态调整。使用top-3
固定相对于输入字段顶部的位置。对于警告图标大小问题:
我添加了
flex-shrink-0
图标以防止错误消息换行时图标缩小。此外,我设置了明确的高度(h-4
)和宽度(w-4
)以保持一致的大小。以下是完整更新后的代码:
这些变化确保无论输入高度或错误消息长度如何,组件都保持正确对齐和视觉一致。