如何阻止密码输入框出现第二个眼睛图标？

问题描述 #

原本注册表单的密码输入框使用自定义Eye SVG图标切换密码可见性，添加新逻辑后，输入框右侧出现Windows风格的黑色眼睛图标，仅在输入内容后显示，点击自定义图标后该默认图标消失，出现图标叠加/显示异常的问题。

相关代码 #

密码输入组件代码 #

<CustomTextField
  borderRadius={15}
  borderColor="rgba(50, 54, 69, 1)"
  width={0.385}
  height={50}
  icon={
    passwordVisible ? (
      <EyeSlash color={handleIconColor('password')} onClick={togglePasswordVisibility} />
    ) : (
      <Eye color={handleIconColor('password')} onClick={togglePasswordVisibility} />
    )
  }
  iconColor={handleIconColor('password')}
  hintText="Password"
  hintColor="grey"
  fontSize={15}
  obscureText={!passwordVisible}
  onFocus={() => handleFocus('password')}
  onBlur={handleBlur}
  name="password"
  value={formData.password}
  onChange={handleChange}
  onIconClick={togglePasswordVisibility}
/>

自定义SVG图标组件 #

const Eye = ({ color, onClick }) => (
  <svg xmlns="http://www.w3.org/2000/svg" style={{fill:color}}width="21" height="21" fill="currentColor" className="bi bi-eye-fill" viewBox="0 0 16 16" onClick={onClick}>
  ...
);

const EyeSlash = ({ color, onClick }) => (
  <svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" fill="currentColor" className="bi bi-eye-slash-fill" viewBox="0 0 16 16" onClick={onClick}>
  ...
);

问题根源 #

你看到的黑色眼睛图标是浏览器自带的密码输入框默认控件，当输入框类型为password时，Chrome、Edge、IE等浏览器会自动添加这个图标。输入内容后显示、点击自定义图标后消失，是因为切换密码可见性时，输入框类型在password和text之间切换——浏览器仅对password类型的输入框显示默认图标，切换到text类型后默认图标就会消失。

解决步骤 #

1. 禁用浏览器默认密码图标
   通过CSS全局或针对目标输入框隐藏浏览器自带的控件：

/* 禁用IE/Edge的默认密码图标 */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
  display: none;
}

/* 禁用Chrome/Edge等webkit内核浏览器的默认图标 */
input[type="password"]::-webkit-credentials-auto-fill-button {
  display: none !important;
  visibility: hidden;
  pointer-events: none;
  position: absolute;
  right: 0;
}

如果使用第三方UI组件库，需确保该样式能作用到组件内部的原生input元素上，可通过组件的className或内联样式传递。

2. 清理重复的事件绑定
   当前代码同时给自定义SVG的onClick和CustomTextField的onIconClick绑定了togglePasswordVisibility，可能导致状态重复切换，建议只保留其中一个绑定（比如删除onIconClick属性，只保留SVG上的onClick），避免状态异常。

3. 检查CustomTextField组件配置
   如果CustomTextField是第三方UI组件，确认组件是否自带密码可见性切换功能——若有，需要关闭该功能（比如部分组件会有showPasswordToggle之类的属性，将其设为false），避免和自定义图标冲突。

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