CSS 修改浏览器自动填充密码默认样式 input

AvatarGiser

已于 2023-06-06 15:25:59 修改

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏：《实战：如何搭建一个完整的 Vue2.0 项目》 CSS 小知识点文章标签： css 前端 javascript

于 2023-06-06 15:21:19 首次发布

本文链接：https://blog.csdn.net/sinat_31213021/article/details/131068641

CSS 小知识点同时被 2 个专栏收录

37 篇文章

订阅专栏

《实战：如何搭建一个完整的 Vue2.0 项目》

13 篇文章

订阅专栏

文章讲述了在遇到浏览器自动填充密码导致input样式改变的问题时，如何通过CSS进行调整，例如使用`-webkit-autofill`类，设置`-webkit-box-shadow`来遮挡背景色，以及调整`border-radius`、`width`和`padding-left`等属性，确保样式一致。同时提到了参考资源用于进一步了解浏览器的自动填充设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

说明

原始效果，未使用自动填充的 input 效果：

在这里插入图片描述

使用自动填充密码，整个 input 改为浏览器默认样式。其实就是在原 input 上盖了一个 input 这就麻烦了…

在这里插入图片描述

修改后：

在这里插入图片描述

CSS

input:-webkit-autofill：自动填充 class 类名；

-webkit-box-shadow：使用盒子阴影遮挡input背景色；

border-radius：一定要设为 0，默认是有弧度的；

width：长度与原始 input 保持一致，视实际情况而定；

padding-left：字体左侧的间距与原始字体间距保持一致，视实际情况而定；

input:-webkit-autofill {
	-webkit-box-shadow: 0px 0px 0px 20px rgb(32,85,104) inset;
	-webkit-text-fill-color: #fff;
	border-radius: 0;
	width: 240px;
	padding-left: 46px;
}