如何将fa fa-eye-slash图标放置在密码输入框内部最右侧

实现方案 #

核心思路是通过「父容器相对定位+图标绝对定位」的方式将图标固定在输入框内部右侧，同时给输入框预留右侧内边距避免输入内容和图标重叠。

方式一：无需修改现有HTML，直接新增以下CSS代码即可 #

/* 密码输入组作为定位父容器 */
.input-group[name="password"] {
  position: relative;
}

/* 眼睛图标定位样式 */
.input-group[name="password"] .fa-eye-slash {
  position: absolute;
  /* 垂直居中适配，如位置不对可直接调整top数值，比如改为2.2rem */
  top: calc(1em + 0.5rem + 1em);
  transform: translateY(-50%);
  right: 12px;
  z-index: 10;
  cursor: pointer;
  color: #aaa;
}

/* 密码输入框预留右侧位置，避免文字遮挡图标 */
.input-group[name="password"] input {
  padding-right: 2.5em;
}

方式二：小改HTML结构，定位更精准（推荐） #

修改后的密码输入组HTML代码：

<div class="input-group" name="password">
  <label>Password:</label>
  <!-- 新增输入包裹容器 -->
  <div class="input-wrapper">
    <input type="password"/>
    <i class="fa fa-eye-slash"></i>
  </div>
  <p class ="registerMsg">
    * Between 4 and 30 chars
  </p>
</div>

对应新增的CSS代码：

/* 输入容器作为定位父级 */
.input-wrapper {
  position: relative;
}

/* 眼睛图标样式 */
.input-wrapper .fa-eye-slash {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 12px;
  z-index: 10;
  cursor: pointer;
  color: #aaa;
}

/* 密码输入框宽度100%适配容器，预留右侧内边距 */
.input-wrapper input {
  width: 100%;
  padding-right: 2.5em;
  box-sizing: border-box;
}

两种方式可任选，调整right和padding-right的数值就可以适配你自己的图标大小和间距需求。

内容的提问来源于stack exchange，提问作者Harzzshest