博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
解决input框自动填充为黄色的问题
阅读量:5319 次
发布时间:2019-06-14

本文共 1049 字,大约阅读时间需要 3 分钟。

题原因: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颜色设置透明度还是会出现黄色背景。这种方法只适合背景颜色为白色的时候

 

转载于:https://www.cnblogs.com/stacey-zy/p/10244975.html

你可能感兴趣的文章
Linux 的 date 日期的使用
查看>>
PHP zip压缩文件及解压
查看>>
SOAP web service用AFNetWorking实现请求
查看>>
jQuery Easy UI Resizable(调整大小)组件
查看>>
Sail
查看>>
C# JSON字符串序列化与反序列化
查看>>
HTTPS、SPDY和HTTP/2的性能比较
查看>>
Java变量类型,实例变量 与局部变量 静态变量
查看>>
Angular实践----理解数据绑定过程
查看>>
sublime快捷键
查看>>
mysql操作命令梳理(4)-中文乱码问题
查看>>
Hyper-V Centos7 网络设置 虚拟机固定IP
查看>>
Python环境搭建(安装、验证与卸载)
查看>>
一个.NET通用JSON解析/构建类的实现(c#)
查看>>
Windows Phone开发(31):画刷 转:http://blog.csdn.net/tcjiaan/article/details/7460226
查看>>
Windows Phone开发(5):室内装修 转:http://blog.csdn.net/tcjiaan/article/details/7269014
查看>>
记Angular与Django REST框架的一次合作(2):前端组件化——Angular
查看>>
08.存储Cinder→5.场景学习→08.Backup Volume→1.概述与配置
查看>>
进阶之路(基础篇) - 012 Arduino IDE 添加DHT11传感器第三方库的方法
查看>>
详谈js面向对象 javascript oop,持续更新
查看>>