CSS中的::-ms-reveal

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/10/21/CSS%E4%B8%AD%E7%9A%84-ms-reveal/

摘要

本文主要讲述了：

背景
什么是::-ms-reveal
作用

正文

背景

当在<input type="password">中从无到有输入文本时，IE 10+和 Edg 会在其右侧显示一个显示密码按钮用于显示明文显示已输入的密码。

什么是::-ms-reveal

::-ms-reveal是 CSS 中的一个伪元素。

作用

修改显示密码按钮的样式。

示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <input type="password" placeholder="placeholder" />
    <style>
      ::-ms-reveal {
        display: none;
      }
    </style>
  </body>
</html>