[分享]css中密码框点击显示密码

CSS中的密码框点击显示密码是一个常用的功能，可以让用户方便地查看自己输入的密码，而不用担心输错了。下面是一个实现密码框点击显示密码的CSS代码：input { paddingright: 30px;...

CSS中的密码框点击显示密码是一个常用的功能，可以让用户方便地查看自己输入的密码，而不用担心输错了。下面是一个实现密码框点击显示密码的CSS代码：

input[type="password"] {
  padding-right: 30px;
}
input[type="password"]:focus {
  padding-right: 100px;
}
input[type="password"]:focus + .toggle {
  display: block;
}
.toggle {
  position: absolute;
  right: 10px;
  top: 5px;
  font-size: 20px;
  color: #777777;
  cursor: pointer;
  display: none;
}
.toggle:hover {
  color: #333333;
} 

首先，我们需要在HTML中定义一个密码框，并给它添加一个class或id，例如：

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

然后，我们在CSS中定义密码框的样式，包括padding-right和:focus伪类。padding-right用来留出一个显示密码的按钮的位置，而:focus伪类则是当用户点击密码框时，将padding-right扩展到100px，以显示一个按钮。

我们还需要定义一个.show密码按钮，该按钮在用户点击密码框时显示。我们使用+选择器来选择当密码框聚焦时，显示.toggle元素。.toggle元素是一个带有.show密码图标的元素，它的位置是相对于密码框定位的。

最后，我们需要用JavaScript来切换密码的可视状态。下面是JavaScript代码：

var password = document.getElementById("password");
var toggle = document.querySelector(".toggle");

toggle.addEventListener("click", function() {
  if (password.type === "password") {
    password.type = "text";
    toggle.innerHTML = "🕶";
  } else {
    password.type = "password";
    toggle.innerHTML = "🕵";
  }
}); 

在这段代码中，我们将密码框和.toggle元素分别用JavaScript变量进行引用。然后，我们为.toggle元素添加一个单击事件监听器，当单击时，它会将密码框的type属性从"password"更改为"text"，并在.show密码按钮上显示一个隐藏密码的图标。

在此之后，用户可以通过单击.toggle按钮轻松地切换密码的可视状态。