input输入框自动填充背景颜色问题

922 阅读1分钟

MDN: autofill CSS(这篇还可以)

CSS Tricks: Change Autocomplete Styles in WebKit Browsers

TJ VanToll: List of Pseudo-Elements to Style Form Controls

张鑫旭:伪元素表单控件默认样式重置与自定义大全

这个默认的自动填充在vue项目中引用了el-input

elementui上给出的两个属性本身是自动关闭的,加不加不能解决这个问题

方案:CSS Tricks: Change Autocomplete Styles in WebKit Browsers

Tip:在加scoped的style中需要/deep/,或者不带scoped前加个作用类名

不带scoped和带scoped

<style>
.link-login input:-webkit-autofill,
.link-login input:-webkit-autofill:hover,
.link-login input:-webkit-autofill:focus {
  border: 1px solid #dcdee2;
  -webkit-text-fill-color: #17233d;
  -webkit-box-shadow: 0 0 0px 1000px #fff inset;
  transition: background-color 5000s ease-in-out 0s;
}
</style>
<style lang="scss" scoped>
  /deep/ input:-webkit-autofill,
  /deep/ input:-webkit-autofill:hover,
  /deep/ input:-webkit-autofill:focus {
    border: 1px solid #dcdee2;
    -webkit-text-fill-color: #17233d;
    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
    transition: background-color 5000s ease-in-out 0s;
  }
</style>

css tricks大全

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 1px solid green;
  -webkit-text-fill-color: green;
  -webkit-box-shadow: 0 0 0px 1000px #000 inset;
  transition: background-color 5000s ease-in-out 0s;
}

效果

总结

若是小白,那就日拱一卒吧!