如果是纯色背景,直接通过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. loadrunner中使用web_custom_request函数调用webservice接口

    1.使用的接口地址: http://www.webxml.com.cn/WebServices/WeatherWebService.asmx?op=getWeatherbyCityName 以SOAP ...

  2. Redis缓存之自定义CacheManager

    测试缓存:原理:CacheManager===Cache 缓存组件来实际给缓存中存储数据1,引入redis的starter,容器中保存的是RedisCacheManager2,RedisCacheMa ...

  3. 在docker中运行.netcore程序

    安装docker 获取core镜像 docker pull microsoft/dotnet 首先在https://hub.docker.com查找core官方镜像,相关参数设置https://hub ...

  4. volley+okhttp封装,一行代码就可访问网络

    volley+okhttp封装,一行代码就可访问网络 前言: 我写这个可能不会完全的教会你去怎么封装一个网络框架,我的目的在于让你不需要你自己封装就可以访问网络,或者说互相学习也可以,我只是想让你大概 ...

  5. IP通信实验感想

    经过几周的学习之后,我终于开始了IP通信的实验课. 我们利用H3C进行对ip地址进行设置,在对不同交换机下的pc进行连接测试 首先,我们对交换机和pc机器进行配置设置,ip地址分配分别从192.168 ...

  6. linux mkdir命令

    1 mkdir,创建一个空目录. 比如:mkdir test 2 mkdir -p,递归创建目录. 比如:mkdir -p a/b.迭代创建. 3 mkdir -m 777 d 创建权限为777的目录 ...

  7. 2019.3.16数据结构考试(Problem 1. rotinv)(循环逆序对)

    Problem 1. rotinvInput file: rotinv.inOutput file: rotinv.outTime limit: 2 secondsMemory limit: 256 ...

  8. 跟我一步一步写出MongoDB Web 可视化工具(二)

    前言 上篇讲了一些基础,主要注重的是查,包括建立数据库链接.获取数据库.获取表.列出数据库.列出表.列出索引.获取数据等. 本篇依然是基础,注重增改删,废话不多说,咱们开始. 进阶 创建一个数据库和一 ...

  9. python--日志模块

    一.logging模块就是python里面用来操作日志的模块,logging模块中主要有4个类,分别负责不同的工作 1. Logger 记录器,暴露了应用程序代码能直接使用的接口:简单点说就是一个创建 ...

  10. GD库imagettftext中文乱码的问题

    linux下出现乱码,加上编码转换就可以了. $str = mb_convert_encoding($str, "html-entities", "utf-8" ...