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;
}
效果
总结
若是小白,那就日拱一卒吧!