input修改自动填充背景色(单一色以及透明)

最新推荐文章于 2025-03-10 10:19:02 发布

清新小伙子

最新推荐文章于 2025-03-10 10:19:02 发布

阅读量1w

点赞数 14

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/m0_46627730/article/details/108520561

版权

css 专栏收录该内容

9 篇文章

订阅专栏

前言

最近想做一个比较好看的登录界面，就将输入框的背景色什么的都改了一遍，测试时基本效果都达到预期，唯独自动填充账号密码时，自己设置的输入框样式不起作用了，样式又变回默认的自动填充色了，这让我很苦恼…

自动填充前的图

在这里插入图片描述

自动填充后的图

在这里插入图片描述

解决方法

我先是通过打开控制台查找控制自动填充背景色的样式：

在这里插入图片描述
找出了原来是input:-internal-autofill-selected将我设置的背景色覆盖了。

修改默认背景色为单一色彩时可采用以下方法：

input:-webkit-autofill {
 box-shadow: 0 0 0px 1000px blue inset !important;
}

处理后自动填充样式为相应颜色

在这里插入图片描述

上面的方法虽然能设置单一的背景色，但我想设置为透明，尝试了很多遍还是无法成功，只好换别的办法：

input:-internal-autofill-previewed,
input:-internal-autofill-selected {
  -webkit-text-fill-color: #FFFFFF !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

处理后自动填充样式正常（透明）

在这里插入图片描述