crome中input输入框自动填充时的背景及字体修改

最新推荐文章于 2024-09-19 11:09:01 发布

leiax00

最新推荐文章于 2024-09-19 11:09:01 发布

阅读量980

点赞数

分类专栏：编程语言文章标签： css javascript

本文链接：https://blog.csdn.net/qq_35566365/article/details/118728535

版权

编程语言专栏收录该内容

19 篇文章

订阅专栏

这篇博客主要讨论了如何解决前端开发中自动填充导致的字体和背景异常问题，通过修改`.el-input__inner`的选择器，设置正确的阴影和背景颜色，确保输入框在自动填充状态下的样式一致性。同时，还涉及到了字体大小的调整，以保持界面的统一视觉体验。

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

// fixed: 修复自动填充导致的字体及背景异常
.el-input__inner {
  &:-webkit-autofill,
  &:-webkit-autofill:hover,
  &:-webkit-autofill:focus,
  &:-webkit-autofill:active {
    box-shadow: 0 0 0 68px $background_white inset !important;
    -moz-box-shadow: 0 0 0 68px $background_white inset !important;
    -webkit-box-shadow: 0 0 0 68px $background_white inset !important;
  }
  &:-webkit-autofill::first-line {
    @include font-m-16-19;
  }
}