题原因:input 框会自动填充一个颜色 如图所示
解决方法 :通过动画去延迟背景颜色的显示 代码如下
1 input:-webkit-autofill,2 textarea:-webkit-autofill,3 select:-webkit-autofill {4 transition: background-color 5000s ease-in-out 0s;5 -webkit-text-fill-color: #1cac17; //设置填充字体颜色6 }
transition 属性用法:
//transition是动画属性,transition: background-color 5000s ease-in-out 500s; 等同于transition-property: background-color; //设置过渡效果css属性的名称transition-duration: 5000s; // 过渡效果持续时间 transition-timing-function: ease-in-out;// 以慢速开始和结束的过渡效果 详细请看http://www.runoob.com/cssref/css3-pr-transition-timing-function.htmltransition-delay: 5000s;// 过渡效果延迟
讲个例子
设置一个div ,背景颜色为白色,当鼠标hover时变为黄色,设置transition为 transition: background-color 5s ease-in-out 0s;
当鼠标悬浮时,五秒变为黄色。
同理,浏览器已经默认设置了auotfill时的颜色 ,现在只用设置transition: background-color 5000s ease-in-out 0s;
意思就是将在5000s显示黄色背景。
缺点:这个方法只是通过动画延迟了黄色背景的显示 ,并未从根本上改变背景颜色
方法2:
input:-webkit-autofill{box-shaow: 0 0 0 1000px #fff inset}
说明:这个方法值是用阴影的效果去遮盖黄色背景,但是只能用rgb颜色,rgba颜色设置透明度还是会出现黄色背景。这种方法只适合背景颜色为白色的时候