input选择历史记录选项时，出现了自带背景色的样式修改

最新推荐文章于 2025-12-03 09:54:23 发布

原创最新推荐文章于 2025-12-03 09:54:23 发布 · 1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css

本文介绍如何通过CSS自定义样式解决浏览器自动填充表单时的样式问题，包括使用box-shadow覆盖默认阴影样式及延长过渡时间以平滑样式变化。

1.设置box-shadow阴影覆盖默认样式

input:-webkit-autofill {

        box-shadow: 0 0 0px 1000px rgba(54,71,130,1) inset !important;

        -webkit-text-fill-color: #fff !important;

        -webkit-background-clip:text;

      }

2.通过延长增加自动填充背景色的方式, 让用户感受不到样式的变化:

input:-webkit-autofill,

input:-webkit-autofill:hover,

input:-webkit-autofill:focus,

input:-webkit-autofill:active {

     -webkit-transition-delay: 99999s;

     -webkit-transition: color 99999s ease-out, background-color 99999s ease-out;
}