css密码眼睛 |高性能css

.password{
position:relative;
}
.password_eye{
position: absolute;
right:10px;
top:50%;
transform:translateY(-50%);
cursor:pointer;
}
.password_eye:before{
content: "\f070";
font-family: FontAwesome;
font-size: 16px;
color: #A7A7A7;
}
.password_show .password_eye:before{
content: "\f06e";
color: #259B24;
}
.password_show .password_input{
-webkit-text-security: disc;
text-security: disc;
}

在这段代码中，大家首先将包含密码输入框的容器设置为相对定位（position:relative），接着使用绝对定位（position:absolute）将密码显示按钮设置在密码输入框的右侧，距离容器上边缘的距离为50%，通过CSS3的transform属性定位到垂直居中的位置。大家使用FontAwesome字体库中的图标作为密码显示按钮的图标，然后设置其颜色为灰色。

当用户点击显示密码按钮时，大家会将其容器的class属性由password改为password_show，并将密码显示按钮的图标及颜色修改为绿色，同时应用-webkit-text-security和text-security属性将密码输入框的内容显示为类似于圆圈的密文，这样用户的密码内容就不会再被隐藏了。

使用这个简单的CSS密码眼睛可以增强用户操作的便捷性，提高网站的用户体验。如果您希望将其应用于您的网站中，请复制上述代码并进行相应的修改即可。