Vue3 Vant密码输入框眼睛图标消失之谜:如何隐藏浏览器默认显示的密码可见性图标?

Vue3 Vant密码输入框眼睛图标消失之谜:如何隐藏浏览器默认显示的密码可见性图标?

vant 密码输入框的隐藏图标之谜

问题:

在使用 vue3 的 vant 库时,用户在使用密码输入框时发现了一个奇怪的问题。当第一次聚焦到输入框时,输入框中会出现一个眼睛图标。然而,当失去焦点后再重新聚焦时,眼睛图标却消失了。这是否是 vant 中存在的 bug?

答案:

经过调查,发现此问题并不是由 vant 库引起的。相反,这是浏览器自身在密码输入框中添加的默认行为。浏览器会自动在密码输入框中显示一个切换密码可见性的眼睛图标。

立即学习“前端免费学习笔记(深入)”;

如何隐藏浏览器自带的眼睛图标:

如果你希望直接隐藏眼睛图标,可以使用以下 css 代码:

input[type="password"]::-webkit-toggle-password { /*chrome*/  -webkit-appearance: none!important;  display: none!important;}input[type="password"]::-moz-ui-password { /*firefox*/  -moz-appearance: none!important;  display: none!important;}input[type="password"]::-ms-reveal { /*edge*/  display: none!important;}

这个 css 规则会覆盖浏览器的默认样式,从而隐藏眼睛图标。

以上就是Vue3 Vant密码输入框眼睛图标消失之谜:如何隐藏浏览器默认显示的密码可见性图标?的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1498808.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月19日 20:47:18
下一篇 2025年12月19日 13:33:53

相关推荐

发表回复

登录后才能评论
关注微信