自定义密码输入框眼睛图标防扩展重叠及聚焦/报错边框问题咨询

完整实现方案 #

1. 核心思路 #

所有边框、状态样式统一由外层 input-wrapper 提供，完全移除输入框自带的默认样式，同时禁用浏览器/密码管理扩展的自动插入图标，避免与自定义眼睛按钮重叠。

2. 改造后的代码 #

HTML部分

<!-- 校验不通过时给外层添加 error 类即可同步报错样式 -->
<div class="input-wrapper">
  <!-- data-lpignore属性用于禁止Lastpass插入自定义图标 -->
  <input class="password-input" type="password" data-lpignore="true" />
  <!-- 按钮指定type避免表单内触发默认提交行为 -->
  <button type="button" class="password-eye icon-password-eye"></button>
</div>

CSS部分

.input-wrapper {
  position: relative;
  border: 1px solid #ccc;
  height: 40px;
  box-sizing: border-box;
  border-radius: 4px; /* 可根据原生输入框风格调整圆角 */
  transition: all 0.2s;
}
/* 聚焦态同步：子输入框获焦时外层容器触发样式 */
.input-wrapper:focus-within {
  border-color: #1677ff; /* 替换为你的项目选中态色值，和原生输入框保持一致 */
  box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.2); /* 可选，模拟原生focus光晕效果 */
  outline: none;
}
/* 报错态样式 */
.input-wrapper.error {
  border-color: #ff4d4f;
}
.input-wrapper.error:focus-within {
  box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.2);
}

.password-input {
  border: none;
  width: 100%;
  height: 100%;
  padding: 0 40px 0 8px; /* 右侧预留40px空间放眼睛按钮，避免扩展/原生图标挤到按钮位置 */
  box-sizing: border-box;
  outline: none; /* 移除输入框自带的focus轮廓，统一由外层提供样式 */
  background: transparent;
}
/* 禁用各浏览器自带的密码显示、自动填充图标 */
.password-input::-ms-reveal,
.password-input::-ms-clear {
  display: none;
}
.password-input::-webkit-contacts-auto-fill-button,
.password-input::-webkit-credentials-auto-fill-button {
  visibility: hidden;
  pointer-events: none;
  position: absolute;
  right: 0;
}

.password-eye {
  background: white;
  border: none;
  height: 40px;
  width: 32px;
  font-size: 24px;
  position: absolute;
  right: 0px;
  top: 0px;
  padding: 0 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-password-eye::before {
  content: '\e618';
}

3. 补充说明 #

• 密码显示/隐藏切换逻辑：给眼睛按钮绑定点击事件，动态切换input的type属性在password和text之间即可实现
• 框架适配：如果使用React/Vue等框架，校验逻辑执行时直接给外层容器动态绑定error类即可同步显示报错边框

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