在ie edge中消除默认出现的密码框小眼睛标志
<style>
/*去除ie edge的密码框默认出现的小眼睛
给人添乱这一块,巨硬从来都没让我失望过*/
input[type="password"]::-ms-reveal{
display: none;
}
input[type="password"]::-ms-clear{
display: none;
}
input[type="password"]::-o-clear{
display: none;
}
</style>
附带原生js显示隐藏密码明文案例
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>密码框演示</title>
<!-- 引入icon图标的css文件 -->
<link rel="stylesheet" href="font/iconfont.css">
<style>
/*去除ie edge的密码框默认出现的小眼睛
给人添乱这一块,巨硬从来都没让我失望过*/
input[type="password"]::-ms-reveal{
display: none;
}
input[type="password"]::-ms-clear{
display: none;
}
input[type="password"]::-o-clear{
display: none;
}
.box{
position: relative;
width: 400px;
border-bottom: 1px solid #ccc;
margin: 100px auto;
}
.box input{
width: 370px;
height: 30px;
border: 0;
outline: none;
}
.box #icons{
position:absolute;
top: 2px;
right: 2px;
}
</style>
</head>
<body>
<div class="box">
<i class="iconfont icon-eye" id="icons"></i>
<input type="password" id="pwd">
</div>
<script>
// 1.获取元素
var eye = document.getElementById('icons');
var pwd = document.getElementById('pwd');
// 2.注册事件 处理程序
var flag = 0;
icons.onclick = function(){
if(flag == 0){
pwd.type = 'text';
//更改元素的类名,以达到变换图标的作用
eye.className='iconfont icon-eye1'
//点击一次之后 flag一定要发生变化
flag = 1
}else{
pwd.type = 'password'
flag = 0
eye.className='iconfont icon-eye'
}
}
</script>
</body>
</html>
效果图如下: