谷歌浏览器使用记住密码功能导致input 输入框样式改变的解决办法

最新推荐文章于 2024-08-20 10:34:06 发布

积极向上的十一

最新推荐文章于 2024-08-20 10:34:06 发布

阅读量2.2k

点赞数

分类专栏： vue elementui input 文章标签： css html html5

本文链接：https://blog.csdn.net/chengzi_jiaotang/article/details/120822529

版权

vue 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

elementui

1 篇文章 0 订阅

订阅专栏

input

1 篇文章 0 订阅

订阅专栏

本文探讨了在谷歌浏览器中遇到的输入框样式改变问题，特别是当使用浏览器记忆功能填充内容时。作者分享了解决背景颜色无法设置的问题，通过使用box-shadow属性巧妙地覆盖了默认样式，实现了透明背景。文章还展示了调整后的样式效果。

摘要由CSDN通过智能技术生成

使用到谷歌浏览器的记忆功能时选择的内容为浏览器保存的内容时会导致样式改变！

// 在使用浏览器保存的数据时 输入框的样式
input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill {
    // 字体颜色
    -webkit-text-fill-color: @c_text_fff !important;
    // 背景颜色
    background-color:transparent !important;
    // 背景图片
    background-image: none !important;
    //设置input输入框的背景颜色为透明色
   -webkit-box-shadow: 0 0 0px 1000px transparent  inset !important;  
    transition: background-color 50000s ease-in-out 0s;  
  }

其中 @c_xxxxxxx 是我自定义的颜色！其中遇到的坑是设置背景颜色没有效果所以用了box-shadow来覆盖！

修改完成后样式为：