在密码输入字段添加并定位眼睛

Question

我正在开发 Node.js 项目。我正在尝试使用 Bootstrap 添加眼睛来输入密码字段以查看它。这是我的输入字段的代码：

  <div class="container">
        <form action='/register' method='post'>
            <h1 class="text-center">Enter data for form</h1>
            /* some other fields */
            <div class="form-group input-group">
                <input class="form-control item" type="password" name="password" id="password"
                minlength="8" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^\da-zA-Z]).{8,}$" id="password" placeholder="Password" required autocomplete="off">
                <i class="far fa-eye-slash" id="togglePassword"></i>
            </div>
            <div class="form-group text-center">
              <button class="btn btn-primary btn-block save-info"
              type="submit">Register </button>
            </div>
        </form>
   </div> 

问题实际上出在眼睛的位置上。这是所有必需的 css 样式：

.container{
    display: flex;
    align-items: center;
    justify-content: center;
  padding:50px 0;
}

.container form, .hello {
  max-width:900px;
  padding:20px 30px;
  border-radius:10px;
  box-shadow:4px 4px 15px rgba(0, 0, 0, 0.2);
  margin: 0 auto;
  background-color: #FFFACD;
}

.container .form-group {
  border-radius:10px;
  margin-bottom:25px;
  padding:5px 10px;
}

.container .save-info {
  border-radius:20px;
  padding:10px 20px;
  font-size:18px;
  font-weight:bold;
  background-color:#3f93ff;
  border:none;
  color:white;
  margin-top:10px;
}


.container .text-center {
  font-size: xx-large;
  color:#154360;
}
 
#togglePassword {
  position: relative;
/*  left: 85%;*/
  cursor: pointer;
  margin-top: 10px;
}

所以，我尝试使用这样的togglePassword标识符，我收到了眼睛在输入字段后添加的结果，它看起来很糟糕。我也尝试过这样的代码：

#togglePassword {
      position: absolute;
      left: 92%;
      cursor: pointer;
      margin-top: 10px;
    }

在这里，当我开始输入密码时，眼睛就消失了，这似乎是错误的逻辑。有人可以提出更好的解决方案或任何想法，让这只眼睛看起来舒适且受人尊敬吗？我应该能够单击它来显示/隐藏密码。

Answer 1

您错过了一些有关如何正确使用引导输入组的详细信息。在图标周围添加两个带有 CSS 类 input-group-append 和 input-group-text 的包装器。如果您想在输入组的右侧有一个图标，您的代码应该如下所示（使用 bootstrap 4）：

<div class="form-group">
   <div class="input-group">
      <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username">
     <div class="input-group-append">
        <span class="input-group-text">
           <span class="far fa-eye-slash"></span>
        </span>
     </div>
</div>

您不需要 #togglePassword 的 CSS 代码。