一招解决输入框auto complete时背景颜色问题

最近在开发中遇到的一个问题,当网站的背景为黑色,用户使用input框中输入内容时,自动填充属性会将内容区域的背景色变为白色,如果要更改背景色,只能寻找替代方案

解决方式是:

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #1b1b1b inset !important;
  -webkit-text-fill-color: white !important;
}

我们在这里所做的只是选择伪元素“自动填充”,然后在其内部应用一个巨大的框阴影,因此背景将被框阴影插图覆盖

然后通过属性text-fill-colorwhite

效果如下


关注公众号“太空编程”,及时收到更多前端知识推送

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容