在ie edge中消除默认出现的密码框小眼睛标志

buildkay

已于 2022-07-11 20:30:04 修改

阅读量3.6k

点赞数 10

分类专栏： javaScript小问题集合文章标签： edge css3 css

于 2022-01-08 08:46:22 首次发布

本文链接：https://blog.csdn.net/qq_46926371/article/details/122375878

版权

javaScript小问题集合专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在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>

效果图如下：

buildkay

关注

10
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
在ie edge中消除默认出现的密码框小眼睛标志

在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:
复制链接

扫一扫