Angular登录页密码框出现双眼睛图标问题求助

问题出在浏览器自带的密码查看控件和你自定义的眼睛图标重复了。像Chrome、Edge这类现代浏览器会默认给密码输入框添加一个查看密码的按钮，导致界面上出现两个眼睛图标。

解决步骤： #

1. 禁用浏览器默认的密码查看按钮
   在CSS里添加以下样式，针对不同浏览器的默认控件进行隐藏：

input[type='text'],
input[type='password']{
    border: none;
    outline: none;
    box-shadow: none;
    width: 100%;
}

/* 隐藏WebKit内核浏览器的默认密码控件 */
input[type="password"]::-webkit-credentials-auto-fill-button {
    display: none !important;
}

/* 隐藏Edge/IE的默认密码查看按钮 */
input[type="password"]::-ms-reveal {
    display: none !important;
}

.fa-eye-slash.btn{
    border: none;
    outline: none;
    box-shadow: none;
}

2. 可选：添加autocomplete属性优化体验
   给密码输入框加上autocomplete="off"，避免浏览器自动填充时可能触发的额外控件：

<div class="class form-group pt-3">
  <div class="input-field">
    <span class="fa fa-lock p-2"></span>
    <input formControlName="password" [type]="type" placeholder="Password" autocomplete="off" />
    <span (click)="hideShowPass()" class="fa {{eyeIcon}}"></span>
  </div>
</div>
<small
  *ngIf="loginForm.controls['password'].dirty && loginForm.hasError('required', 'password')"
  class="text-danger"
>
  *Password is required
</small>

修改后，浏览器的默认密码查看按钮会被隐藏，只剩下你自定义的眼睛图标，点击切换密码显示/隐藏的功能也能正常工作。

内容的提问来源于stack exchange，提问作者Mithun Chandra Howlader