如果用了element-ui的show-password后再出现浏览器自带的小眼睛的话会感觉特别奇怪
如何复现
经过我多次试验,发现当第一次光标聚焦在密码输入框时才出现,之后就聚焦就不会再现小眼睛了,edge和ie浏览器都有
试验版本:IE(11.1016.18362.0)和 edge(85.0.564.41)
查看edge代码审查,发现有微软自己写的样式
解决方案
/*取消微软浏览器的密码小眼睛样式*/
input[type="password"]::-ms-reveal {
display: none;
}
输入信息后,自己写得样式会生效,如下:
生效的css:
完整代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input[type="password"]::-ms-reveal {
display: none;
}
</style>
</head>
<body>
<input type="password"/>
</body>
</html>