密码字段上的眼睛图标有时可见，有时不可见

Question

我有这个登录表单的密码（我正在使用引导程序 4）

<div class="form-account-label-input">
   <label> Password <span class="star-red">&nbsp;*</span></label>
   <input type="password" id="Password" name="Password" class="w-100">                                 
</div>

当我开始插入密码时，会出现一个图标眼睛，如下所示

我没有在我的代码上设置任何眼睛图标。 它是从哪里来的？ 问题是这个眼睛图标有时会出现，有时不会。 所以我想知道它来自哪里禁用并自己在代码上设置一个眼睛图标？

更新

我发现我只是在 Edge 浏览器上而不是在 chrome 中

Answer 1

**Try this**
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
  "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap- 
  icons.css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384
ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
<style>
form i {
  margin-left: -30px;
  <h1>Sign In</h1>
  cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<form>
        <p>
            <label>Password:</label>
            <input type="password"
                name="password" id="password" />
            <i class="bi bi-eye-slash"
                id="togglePassword"></i>
        </p>
    </form>
</div>
<script>
    const togglePassword = document
        .querySelector('#togglePassword');

    const password = document.querySelector('#password');

    togglePassword.addEventListener('click', () => {

        // Toggle the type attribute using
        // getAttribure() method
        const type = password
            .getAttribute('type') === 'password' ?
            'text' : 'password';
            
        password.setAttribute('type', type);

        // Toggle the eye and bi-eye icon
        this.classList.toggle('bi-eye');
    });
</script>
</body>
</html>