javascript - 在密码字段内放置密码可见性图标

Question

我有以下代码。

<div class="login-password">
              <label for="password" class="form-label"
                >Enter your password</label
              >
              <input
                id="loginPassword"
                type="password"
                class="form-control"
                placeholder="Enter your password"
              />
              <i
                class="bi bi-eye-slash"
                id="togglePassword"
                style="margin-left: -30px; cursor: pointer"
              ></i>
</div>

当我这样做时，密码可见性图标如下图所示。

如何将可见性图标放置在密码字段中。

标签： javascripthtmlpasswordstoggle

Answer 1

以marketwatch.com 的登录为例，您必须将<i> 标签的css 属性“位置”设置为“绝对”。这将允许您将其放置在输入框中。也许是这样的：

.bi-eye-slash {
    width: 25px;
    height: 25px;
    position: absolute;
    z-index: 200;
    top: 28px;
    right: 10px;
    cursor: pointer;
}