消除input标签的自动填充 白色背景,及更改字体颜色

时间:2024-03-11 17:39:08

一、 问题重现

在我门开发过程中难免会遇到这样的问题:

用户可能会选择浏览器自动填充

选择之后就变成了这样,很难看

 

二、问题解决

<input type=\'text\'/> <!-- 假设我们的html是这样 -->

我们可以用
autofill伪类来控制
css

input:-webkit-autofill {
  transition: background-color 5000s ease-in-out 0s;
}

这样就能解决白色背景的问题:

但是 字体确是黑色,而且也不受color影响。
我们用另一个css熟悉解决
text-fill-color用来控制input自动填充的字体颜色

input {
    -webkit-text-fill-color: #9cc5ec;  //颜色是设置成你需要的颜色
}

 

版权声明:本文为CSDN博主「KangTongShun」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/KangTongShun/java/article/details/105712554