在密码字段中放置密码可见性图标

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>

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

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

Answer 1

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

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

Answer 2

我找到了我自己问题的答案。好吧，我们要对输入进行分组，图标就是这样，下面是代码。

.input-group-addon i {
    margin-left: -30px;
    cursor: pointer;
    z-index: 200;
    position: absolute;
    font-size: large;
    color: #6c757d;
  }
 <link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css"
/>

<div class="login-password">
                  <label for="password" class="form-label"
                    >Enter your password</label
                  >
                  <div class="input-group">
                    <input
                      id="loginPassword"
                      type="password"
                      class="form-control"
                      placeholder="Enter your password"
                    />
                    <div class="input-group-addon">
                      <i class="bi bi-eye-slash" id="togglePassword"></i>
                    </div>
                  </div>
                </div>

在密码字段中放置密码可见性图标

Placing password visibility icon inside password field

html

javascript

passwords

toggle