如果是纯色背景,直接通过box-shadow覆盖即可:

input:-webkit-autofill {
color: #333!important;
-webkit-text-fill-color: #333;
box-shadow: 0 0 0 1000px #eaeaea inset
} input:autofill {
color: #333!important;
-webkit-text-fill-color: #333;
box-shadow: 0 0 0 1000px #eaeaea inset
}

如果是透明色背景,通过transition设置足够长的变色推迟:

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
color: #fff !important;
-webkit-text-fill-color: #fff;
-webkit-transition: background-color 43200s ease-in-out 0s;
transition: background-color 43200s ease-in-out 0s;
}
input:autofill,
input:autofill:hover,
input:autofill:focus {
-webkit-text-fill-color: #fff;
-webkit-transition: background-color 43200s ease-in-out 0s;
transition: background-color 43200s ease-in-out 0s;
}

input搜索框:根据历史记录自动填充后,去除默认黄色背景的更多相关文章

  1. 去掉chrome记住密码后自动填充表单的黄色背景

    chrome表单自动填充后,input文本框的背景会变成黄色的,通过审查元素可以看到这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性,然后对 ...

  2. 如何修改chrome记住密码后自动填充表单的黄色背景 ?

    input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { background-color: rgb(2 ...

  3. 解决Chrome下表单自动填充后背景色为黄色

    Chrome浏览器在表单自动填充后会显示黄色背景,这是Chrome的私有属性导致,对于有洁癖的人来讲,是不喜欢的,我们可以手动去掉. 代码如下: input:-webkit-autofill { -w ...

  4. input搜索框实时检索功能实现(超简单,核心原理请看思路即可)

    问题:实现input搜索框实时检索的功能,类似哔哩哔哩首页搜索功能(壮哉我大b站!).公司要求,emmmm没办法,果然懒人是要被赶着走才会进步的说,诶嘿O(∩_∩)O. 解决方法: 1.参考资料:ht ...

  5. input type=password 浏览器会自动填充密码的问题

    解决办法是在form上或input上添加autoComplete="off"这个属性. form表单的属性如下所示: 但是这个解决方案在谷歌和火狐上均有bug,下面来一个一个解决. ...

  6. JS,JQ及时监听input值的变化,MUI的input搜索框里的清除按钮的点击监听事件

    JS: document.getElementById("input对象的ID").addEventListener('input',function(){ console.log ...

  7. input placeholder 在chrome 浏览器自动填充时,背景色覆盖原有背景图片问题。

    user-block-name, .user-block-pwd { margin-bottom: 10%; text-align: center; position: relative; } .us ...

  8. CHROME下去掉保存密码后输入框变成黄色背景样式

    之前没遇到过这种情况,现在打开这个页面后,手机号和密码都已经输入了,而且还显示的是黄色背景,清了下cookie,没有解决问题.请教了下大神,先把方法整理到这儿. 用代码审查看了input样式有如下样式 ...

  9. 【jQuery】input框输入手机号自动填充空格

    <input type="tel" id="tel"> $("#tel").keyup(function(){ _self = ...

随机推荐

  1. 使用Python编的猜数字小游戏

    import random secret = random.randint(1, 30) guess = 0 tries = 0 print("我叫丁丁,我有一个秘密数字!") p ...

  2. Spring MyBatis多数据源(同包)

    创建基本的包 entity service dao 为了区分多数据源 一个用的是Mysql 一个是Oracle 方便测试, 创建MyBatis dao 映射 xml 文件 创建db.propertie ...

  3. js计算地球(地图)上两点的直线距离

    //计算两点位置距离 getDistance: function (lat1, lng1, lat2, lng2) { lat1 = lat1 || 0; lng1 = lng1 || 0; lat2 ...

  4. js用解构来定义变量并赋值

    解构数组 var [a,b]=[1,2]; a //1 b //2 ------------- var [a,b]=[1,2,3,4]; a //1 b //2 ---------------- va ...

  5. 【XAF问题】多个属性验证RuleUniqueValue

    一.问题 1. 在XAF中如何验证多个属性唯一值? 二.解决方法 使用RuleCombinationOfPropertiesIsUnique [RuleCombinationOfPropertiesI ...

  6. 在Windows Server 2012下安装 php memcache模块

    一.环境描述 操作系统:Windows Server 2012 R2 Datacenter Web服务提供软件:Microsoft IIS 8.5.9600.16384 IIS调用PHP方法:增加处理 ...

  7. redhat 7 配置源

    http://blog.51cto.com/eagle2014/1434305 一.准备工作 Vmware Workstation 10.0虚拟机软件(http://www.vmware.com/pr ...

  8. IE10打印预览无反应

    1. 建议您打开IE后,按Alt键,选择”工具“-”兼容性视图设置“,将网站添加到兼容性视图列表中,看情况如何.2.internet选项-高级-启用保护模式 勾去掉 看看行不行3.按下“Windows ...

  9. 网络通信协议,TCP和UDP 的区别

    1.网络通信   互联网本质就是一系列的网络通信,互联网协议的功能是定义计算机如何介入internet,以及介入internet的计算机通信的标准.互联网协议按照功能不同分为osi7层或tcp/ip五 ...

  10. MapServer Tutorial——MapServer7.2.1教程学习——第一节用例实践:Example1.5 Adding a raster layer

    MapServer Tutorial——MapServer7.2.1教程学习——第一节用例实践:Example1.5 Adding a  raster layer 一.前言 MapServer不仅支持 ...