如何在密码input输入框内部放置密码显示/隐藏切换图标

完全可以通过纯CSS实现该效果，不需要嵌套input元素。你原有的密码切换逻辑、Font Awesome图标调用的写法已经可以正常运行，只需要补充少量定位样式，调整元素布局即可，完全符合HTML语法规范。

核心实现逻辑 #

• 给包裹密码输入框、切换checkbox、图标label的父元素设置相对定位，作为内部定位元素的位置参照
• 给密码输入框增加足够的右侧内边距，避免输入的密码文本被内置图标遮挡
• 隐藏实际用于触发状态切换的checkbox（你原有代码已经写了display: none，这部分无需修改）
• 给绑定checkbox的图标label设置绝对定位，移动到输入框内部右侧位置即可——点击label会自动触发关联checkbox的选中/取消选中，原有JS逻辑不需要改动。

完整可运行代码 #

JavaScript #

原有切换逻辑无需调整：

function showPassword() {
  var x = document.getElementById("password_current");
  x.type = x.type === "password" ? "text" : "password";
}

CSS #

在你原有样式基础上补充布局定位相关代码即可：

/* 原有切换图标样式保留 */
#togglePw { display: none; }
#togglePw + label:before { content: "\f06e"; }
#togglePw:checked + label:before { content: "\f070"; }

/* 新增布局样式 */
/* 父容器设置相对定位 */
.pw-container {
  position: relative;
  width: fit-content;
}
/* 密码输入框预留图标位置 */
.field-settings {
  box-sizing: border-box;
  height: 38px;
  width: 240px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0 40px 0 12px;
  font-size: 14px;
}
/* 图标定位到输入框内部右侧 */
.pw-container .fa {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #666;
  user-select: none;
}

HTML #

只需要给外层包裹元素加上对应类名即可，不需要嵌套input：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">

<p class="pw-container">
  <label class="t2" for="password_current"></label>
  <input type="password" class="field-settings" name="password" id="password_current" autocomplete="off"/>
  <input type="checkbox" id="togglePw" onclick="showPassword()"/> 
  <label for="togglePw" class="fa"></label>
</p>

可调参数说明 #

• 调整.field-settings的padding-right数值，可以控制输入文字和右侧图标的间距
• 调整.pw-container .fa的right数值，可以控制图标距离输入框右边缘的距离
• 可以给图标加hover状态样式，优化交互体验

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