[分享]css元素点击密码显示隐藏

在使用网上银行或者其他涉及到账户密码的场合中，为了保护账户安全，一般输入密码时都会显示为黑点或星号，但是有时候用户需要确认自己输入的密码是否正确，在这种情况下，就需要一个点击显示或隐藏密码的功能了。那...

在使用网上银行或者其他涉及到账户密码的场合中，为了保护账户安全，一般输入密码时都会显示为黑点或星号，但是有时候用户需要确认自己输入的密码是否正确，在这种情况下，就需要一个点击显示或隐藏密码的功能了。那么，怎么实现点击显示隐藏密码呢？
首先，在HTML中，我们需要用一个input标签来输入密码，同时需要加上type="password"属性，这样输入时才会显示为黑点或星号。下面是示例代码：

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

然后，在CSS中，我们可以使用伪类:checked以及相邻兄弟选择器来实现点击显示或隐藏密码的效果。具体实现方法是，先给input标签加一个label标签，然后使用label标签来模拟点击事件，绑定input的id，使点击label时可以对应到input标签。然后，通过:checked伪类选择器来判断label是否被选中，若选中，则将input的type属性设置为"text"，这样会显示文本信息，否则就将type设置为"password"，这样就不可见了。下面是示例代码：

label[for="passwordInput"] {
  padding-left: 5px;
  cursor: pointer;
}
label[for="passwordInput"]:before {
  content: "显示密码";
  padding-left: 10px;
}
label[for="passwordInput"]:after {
  content: "隐藏密码";
  margin-left: 5px;
}
label[for="passwordInput"]:hover:before,
label[for="passwordInput"]:hover:after {
  color: #06c;
}
#passwordInput[type="password"] {
  font-family: monospace;
}
#passwordInput[type="text"] {
  font-weight: bold;
}
#passwordInput[type="password"] + label[for="passwordInput"]:before {
  display: block;
}
#passwordInput[type="text"] + label[for="passwordInput"]:after {
  display: block;
}
#passwordInput[type="password"] + label[for="passwordInput"]:after {
  display: none;
}
#passwordInput[type="text"] + label[for="passwordInput"]:before {
  display: none;
}
#passwordInput:checked {
  /* 显示密码 */
  -webkit-text-security: none;
          text-security: none;
} 

最后，在JavaScript中，我们需要实现一个点击事件，使得当用户点击label标签时，可以切换input标签的type属性。下面是示例代码：

var input = document.getElementById('passwordInput');
var label = document.querySelector('label[for="passwordInput"]');
label.addEventListener('click', function() {
  input.type = (input.type === 'password') ? 'text' : 'password';
}); 

以上就是使用CSS来实现密码显示和隐藏的方法。通过这种方法，可以有效地保护用户的隐私信息，提高用户的安全感。