CSS 如何使“密码”输入显示密码

在本文中，我们将介绍如何通过CSS来实现“密码”输入显示密码的功能。

阅读更多：CSS 教程

1. 使用type属性值为”password”的元素

在HTML中，我们可以使用元素来创建输入框。对于密码输入框，我们可以使用type属性并将其值设置为”password”来指定输入类型为密码。

<input type="password" name="password" id="password">

在上述代码中，我们创建了一个密码输入框，其名称为”password”，id为”password”。

2. 修改type属性值为”text”

为了实现“密码”输入显示密码的功能，我们需要通过CSS来修改type属性值为”text”。这样，输入框将被视为文本输入框而不是密码输入框。

#password[type="password"] {
  -webkit-text-security: disc;
  -moz-text-security: disc;
  text-security: disc;
}

在上述代码中，我们通过选择器选择了id为”password”且type属性值为”password”的元素。然后，我们使用text-security属性将输入框的文本显示为圆点（•）或其他字符来隐藏密码。

3. 浏览器兼容性

需要注意的是，text-security属性在不同浏览器中的兼容性可能有所差异。上述示例代码中的前缀（-webkit-和-moz-）是为了提高兼容性，分别用于WebKit内核（如Chrome和Safari）和Gecko内核（如Firefox）的浏览器。

4. 示例

下面是一个完整的示例，演示了如何使用CSS来实现“密码”输入显示密码的功能。

<!DOCTYPE html>
<html>
<head>
  <title>Password Input Example</title>
  <style>
    #password[type="password"] {
      -webkit-text-security: disc;
      -moz-text-security: disc;
      text-security: disc;
    }
  </style>
</head>
<body>
  <h1>Password Input Example</h1>

  <label for="password">Password:</label>
  <input type="password" name="password" id="password">

  <br><br>

  <label for="showPassword">Show Password:</label>
  <input type="checkbox" id="showPassword" onclick="togglePasswordVisibility()">

  <script>
    function togglePasswordVisibility() {
      var passwordInput = document.getElementById("password");
      var showPasswordInput = document.getElementById("showPassword");

      if (showPasswordInput.checked) {
        passwordInput.type = "text";
      } else {
        passwordInput.type = "password";
      }
    }
  </script>
</body>
</html>

在上述示例中，我们创建了一个密码输入框和一个复选框，用于切换密码的可见性。通过点击复选框，我们可以将密码输入框的type属性值从”password”切换为”text”，从而实现显示密码的功能。