如果是纯色背景,直接通过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. Qt551.OpenGL.ZC简单例子

    1.主要 模仿代码:OpenGL的教程 第3课 "tutorial03_matrices"的代码(E:\OpenGL_something\ogl-master) 2.参考代码:Qt ...

  2. 获取访问者IP

    在一般情况下使用Request.getRemoteAddr()即可,但是经过nginx等反向代理软件后,这个方法会失效.     * 本方法先从Header中获取X-Real-IP,如果不存在再从X- ...

  3. vue动态绑定src加字符串拼接

    关键点 1.img中的src的字符串动态拼接 2.style中的background属性赋值 一.img中的src的字符串动态拼接 1.问题是这样子的,瞧瞧 基本网络链接 : http://openw ...

  4. 【架构设计】Android:配置式金字塔架构

    最近做一个项目,在项目搭建之前,花了些许时间去思考一下如何搭建一个合适的架构.一开始的构思是希望能合理的把应用的各部分进行分离,使其像金字塔一样从上往下,下层为上层提供功能. 在平常项目中,总是有很多 ...

  5. js实现bind方法

    //目标函数 function fun(...args) { console.log(this); console.log(args); } //目标函数原型对象上的一个方法cher func.pro ...

  6. vue admin mock数据

    搭建脚手架axios访问不到接口:mock数据的问题mock下的index.js设置了默认指向

  7. 基于百度通用翻译API的一个翻译小工具

    前几天写了一个简单的翻译小工具,是基于有道翻译的,不过那个翻译接口有访问限制,超过一定次数后会提示访问过于频繁,偶然发现百度翻译API如果月翻译字符少于200万是不收取费用的,所以就注册了一个百度开发 ...

  8. .NetCore WebApi 添加 Log4Net

    一 .配置 1.vs2019 创建一个.net core web程序,选择webapi 2.项目中添加一个配置文件:添加--新建项--XML文件,命名为log4net.config 我使用的是log4 ...

  9. XV Open Cup named after E.V. Pankratiev. GP of Central Europe (AMPPZ-2014)--B.Petrol

    多源最短路+并查集 #include <bits/stdc++.h> using namespace std; #define rep(i, j, k) for (int i = int( ...

  10. 按照分层设计理念,完成《XXX需求征集系统》的概念结构设计

    按照分层设计理念,完成<XXX需求征集系统>的概念结构设计. 1.概要架构-初步设计 有关<XXX需求征集系统>的鲁棒图如下: 2.概要架构之高层分割 切系统为系统: 高层功能 ...