主页 / coding / 问题 / 79368354
Accepted
Isaac Cortés
Asked: 2025-01-19 11:24:45 +0800 CST

在 Tailwind 中的注册表单中定位图标

  • 772

我正在创建一个注册表单，但无法定位眼睛图标。最初，图标的位置正确，但当显示错误消息时，图标就会错位。

以下是一些显示该问题的屏幕截图以及我正在使用的代码。

在此处输入图片描述

在此处输入图片描述

另外，我不知道如何让错误消息图标变大。对于较长的错误消息，图标会变得太小。

在此处输入图片描述

这是我的代码：

                    <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，说实话，我对前端开发没有太多经验。对于后端开发人员来说，这就像一场噩梦！有人能帮我解决这些问题吗？

forms

1 个回答

  1. Best Answer

    对于眼睛图标的定位：
    我将其替换inset-y-0为top-3以确保一致的对齐方式，因为inset-y-0会根据输入的高度动态调整。使用top-3固定相对于输入字段顶部的位置。

    <span
  onClick={togglePasswordVisibility}
  className="absolute top-3 right-0 pr-3 flex items-center cursor-pointer justify-center"
>
  {showPassword ? <VscEyeClosed /> : <VscEye />}
</span>

    对于警告图标大小问题：
    我添加了flex-shrink-0图标以防止错误消息换行时图标缩小。此外，我设置了明确的高度（h-4）和宽度（w-4）以保持一致的大小。

    <TiWarning className="mr-1 flex-shrink-0 h-4 w-4 text-lg" />

    以下是完整更新后的代码：

    <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 top-3 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 flex-shrink-0 h-4 w-4 text-lg" />
        {passwordError}
      </p>
    )}
  </div>
</div>

    这些变化确保无论输入高度或错误消息长度如何，组件都保持正确对齐和视觉一致。

    • 1

相关问题