自定义密码显示按钮Customize the password reveal button

password 控件中的输入Microsoft Edge包括密码显示控件。The password input type in Microsoft Edge includes a password reveal control. 用户可以选择密码 输入按钮 来显示 密码 字段。A user may choose the password input button to reveal the password field. 显示 的密码 字段可帮助用户验证密码是否正确。The revealed password field helps the user verify if the password is correctly. 在用户输入密码字段中的文本后,**** 用户可以选择密码显示按钮或选择**** Alt + F8 切换输入的可见性。After a user has entered text in the password field, a user may choose the password reveal button or select Alt+F8 to toggle visibility of the input.

隐藏用户输入的字符的密码字段。A password field with dots hiding the characters entered by a user. 密码 显示 按钮显示在密码 字段的右侧The password reveal button appears to the right of the password field.

目视图标显示在隐藏密码文本的点旁边

切换 密码显示 按钮,将眼睛图标更改为带斜杠的目视图标,并显示原始密码文本。Toggle the password reveal button to change the eye icon to an eye icon with a slash through it, and to reveal the original password text.

目视图标上有一个斜杠,并且显示原始密码文本

默认情况下,密码 显示 按钮插入到所有 HTML 元素的 Shadow DOM 中,并将 input 设置为 type "password"By default, the password reveal button inserts into the Shadow DOM of all HTML input elements with the type set to "password". 从 Microsoft Edge版本 87 开始,用户或企业可能会全局禁用此功能。Starting with Microsoft Edge Version 87, users or enterprises may disable this feature globally. 您(Web 设计人员和开发人员)应该希望大多数Microsoft Edge用户拥有默认体验。You, web designers and developers, should expect most Microsoft Edge users to have the default experience.

删除密码显示控件Remove the password reveal control

通过定位伪 元素, 你可以完全删除密码显示 ::-ms-reveal 按钮。You may completely remove the password reveal button by targeting the ::-ms-reveal pseudo element.

::-ms-reveal {
    display: none;
}

但是,你应该考虑利用密码 显示 按钮。However, you should consider taking advantage of the password reveal button. 本机 密码显示 按钮在行为 内置了重要的安全措施。The native password reveal button has important security measures built into the behavior.

自定义控件样式Customize the control style

你可以改为修改密码显示按钮的样式,以更好地匹配网站的视觉语言,**** 而不是完全删除控件。Instead of fully removing the control, you may instead modify the styling of the password reveal button to better match the visual language of the website. 以下代码段提供了此类样式的示例。The following snippet provides an example of such styling.

::-ms-reveal {
    border: 1px solid transparent;
    border-radius: 50%;
    box-shadow: 0 0 3px currentColor;
}

设置密码显示按钮样式时,请记住 以下 事项。Keep the following things in mind when you style the password reveal button.

  • 目视图标实现为背景图像。The eye icon implements as a background image. 若要向密码显示按钮添加背景 ,请使用 CSS background-color 属性而不是 background 速记属性。To add a background color to the password reveal button, use the CSS background-color property instead of the background shorthand property.

  • 你可以调整密码显示按钮的大小 规模。You may adjust the size and scale of the password reveal button.

    备注

    浏览器将隐藏密码输入控件边界之外的任何溢出。The browser hides any overflow outside of the bounds of the password input control.

  • 目前,没有状态选择器可用于设置密码显示按钮的切换 状态 样式。Currently, no state selectors are available to style the toggled state of the password reveal button.

控件的可见性Visibility of the control

用户向 密码字段中输入文本之前,密码显示 按钮不可用The password reveal button is unavailable until the user enters text into the password field. 为了帮助确保用户的密码输入安全,浏览器在下列情况下禁止显示该按钮。To help keep the user's password entry secure, the browser suppresses the button in the following scenarios.

  • 如果焦点从密码 字段移 开,浏览器将删除 密码显示 按钮。If focus moves away from the password field, the browser removes the password reveal button.
  • 如果脚本修改 密码 字段,浏览器将删除 密码显示 按钮。If scripts modify the password field, the browser removes the password reveal button.

如果删除密码显示按钮,用户必须删除密码字段的内容,密码显示按钮才能**** 再次显示。If the password reveal button is removed, the user must delete the contents of the password field before the password reveal button displays again. 如果用户离开未锁定的设备,此行为可防止某人对显示密码进行细微的调整。This behavior prevents someone from making a minor adjustment to display the password, should the user step away from an unlocked device.

如果使用密码管理器自动填充密码字段,**** 则密码显示按钮不可用。The password reveal button is unavailable if the password field autofills using the password manager.