如果是纯色背景,直接通过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. linux shell实战之知识体系

    1.认识GUN/bash shell 梳理清楚硬件,内核及模块,shell之间的关系:熟悉GUN的bash以及bash shell的功能:学习shell的通配符 2.shell 的变量 变量的设置,取 ...

  2. JVM调优(一)

    JVM调优的主要过程有: 确定堆内存大小(-Xmx, -Xms).合理分配新生代和老生代(-XX:NewRation, -Xmn, -XX:SurvivorRatio).确定永久区大小: -XX:Pe ...

  3. 8.5 GOF设计模式四: 观察者模式Observer

    GOF设计模式四: 观察者模式Observer  现实中遇到的问题  当有许多不同的客户都对同一数据源感兴趣,对相同的数据有不同的处理方式,该如 何解决?5.1 定义: 观察者模式  观察者模式 ...

  4. JAVA写接口傻瓜(!)教程(二)

    接上一篇 3.数据库SQL sever配置 理论上来说,java web项目连接什么数据库都行,但是我电脑上SQL sever用了三年了,各种操作都比较熟悉,所以也懒得再用My SQL.想用My SQ ...

  5. swagger坑

    接口测试导出Excel,使用swagger得到响应后手动点击下载--Excel时文件损坏无法打开,,,而直接请求链接下载到的文件正常打开..

  6. python----数据驱动ddt的使用

    一.安装ddtpip install ddt 二.数据驱动和代码驱动数据驱动:根据你提供的数据来进行测试,比如接口自动化测试框架ATP代码驱动:必须得写代码才能测试,比如unittest 三.使用数据 ...

  7. [转载]List接口的使用

    List集合代表一个有序集合,集合中每个元素都有其对应的顺序索引.List集合允许使用重复元素,可以通过索引来访问指定位置的集合元素. 1.List接口和ListIterator接口 List作为Co ...

  8. vbs中对excel的常用操作

    使用QTP自动化测试中,用到对excel的读写操作,这里把一些常用对excel操作的方法进行了归纳,总结.(对excel格式设置的常用操作这里没有进行总结.) Function DataToExcel ...

  9. C#UDP广域网,局域网通信-原理分析

    一.UDP局域网通信. 这个比较简单,关于局域网中的2台或者更多的计算机之间的UDP通信,网络上一大把,直接复制粘贴就可以使用,原理也非常简单.所以,本文不做详细介绍. 二.UDP广域通信(包括路由器 ...

  10. fatal error C1010: 在查找预编译头时遇到意外的文件结尾

    错误描述:fatal error C1010: 在查找预编译头时遇到意外的文件结尾.是否忘记了向源中添加“#include "stdafx.h"”? 错误分析:     此错误发生 ...