使用chrome浏览器选择记住密码的账号,输入框会自动加上黄色的背景,有些设计输入框是透明背景的,需要去除掉这个黄色的背景;

方法1:阴影覆盖

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px white inset !important;
}
   

由于是设置颜色覆盖,所以只对非透明的纯色背景有效

方法2:修改chrome浏览器渲染黄色背景的时间

:-webkit-autofill {
 -webkit-text-fill-color: #fff !important;
 transition: background-color 5000s ease-in-out 0s;
}
   

完美解决

2、input 获取焦点后,清除默认蓝色边框,添加css属性

outline:none;

chorme 浏览器记住密码后input黄色背景处理方法(两种)的更多相关文章

  1. chorme浏览器记住密码后input黄色背景处理方法总结(三种)

    问题分析 正常情况: 记住密码后访问: 解决方法 方法1:阴影覆盖input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px white ins ...

  2. chorme 浏览器记住密码后input黄色背景处理

    使用chrome浏览器选择记住密码的账号,输入框会自动加上黄色的背景,有些设计输入框是透明背景的,需要去除掉这个黄色的背景: 方法1:阴影覆盖 input:-webkit-autofill { -we ...

  3. Chrome浏览器记住密码后input框黄色背景且背景图片不显示的问题

    Chrome浏览器记住密码后再进入登录页后,输入框背景颜色变为黄色,字体颜色变成#000黑色,且添加的背景图片也那不显示了,进入审查元素后,发现浏览器默认给输入框添加了样式,并且无法通过importa ...

  4. react中密码自动填充及解决火狐浏览器,360浏览器记住密码后,密码框自动填充终极解决方案

    先直接上核心代码如下: 在火狐浏览器,360浏览器,初次加载,bug长这样: 如果你想通过生命周期componentDidMounted等生命周期进行置空操作都是不行的,这可能是浏览器自带的特性记住密 ...

  5. 记住密码后,密码框Password会自动带出数据

    一般登陆之后浏览器会询问是否记住密码,如果把密码记住在浏览器上,下次登陆的时候浏览器会把用户名和密码自动填充到登录页面.前段时间服务站平台的员工账号模块提测后,测试提出360浏览器记住密码后会自用把登 ...

  6. Vue单页面应用阻止浏览器记住密码

    Vue单页面应用阻止浏览器记住密码 ——IT唐伯虎 摘要: Vue单页面应用阻止浏览器记住密码. 现象1:路由切换时再次提示“是否记住密码” 登录页面有个密码输入框,输入账号密码进行登录: 登录完成后 ...

  7. CSS实现自适应不同大小屏幕的背景大图的两种方法(转自简书)

    CSS实现自适应不同大小屏幕的背景大图的两种方法 一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块 ...

  8. HTML中设置背景图的两种方式

    HTML中设置背景图的两种方式 1.background    background:url(images/search.png) no-repeat top; 2.background-image ...

  9. springboot项目启动成功后执行一段代码的两种方式

    springboot项目启动成功后执行一段代码的两种方式 实现ApplicationRunner接口 package com.lnjecit.lifecycle; import org.springf ...

随机推荐

  1. Linux内核静态映射表的建立过程

    /* *    平台:   s5pv210 *    内核版本号: 2.6.35.7 */ kernel/arch/arm/mach-s5pv210/mach-smdkc110.c 这个文件是由三星在 ...

  2. lvds cable信号

    http://forums.bit-tech.net/showthread.php?t=208616

  3. ruby里面module和class的区别

    一句话概括,就是 class可以实例化 module不可以 别的都一样 关于继承的一点区别 class是使用<作为继承的关键字,只支持单继承 module是使用include来做实例继承(实例化 ...

  4. week3-栈和队列

    1.学习总结 2.PTA实验作业 2.1 题目1:7-1 jmu-报数游戏 2.2 设计思路(伪代码或流程图) 2.3 代码截图 2.4 PTA提交列表说明. 答案错误:error少了 !: 非零返回 ...

  5. Fri Oct 31 18:00:00 UTC+0800 2008转换为yyyy-mm-dd

    这个其实网上有很多例子,都是直接用js在前端做了时间处理,我的处理也一样,想要变成2008-3-31,就用下面的js直接可以处理 function Todate(num) { //Fri Oct 31 ...

  6. WebStorm live edit 浏览器实现同步实现步骤

    1.打开WebStore的设置对话框,找到live edit选项,选中Enable live editing. 2.打开Chrome浏览器,进入Chrome网上商店,搜索JetBrains IDE S ...

  7. aix操作系统的版本中TL SP 含义

    AIX 分为四个主要的操作系统级别:版本.发行版.技术级 (TL) 和服务包 (SP).版本和发行版通常指的是 AIX 的名称,例如AIX 7.1.TL 是包含重大更新的操作系统的发行版,而 SP 包 ...

  8. 给iOS开发新手送点福利,简述UIPageControl的属性和用法

    UIPageControl 1.   numberOfPages // 设置有多少页 默认为0 [pageControl setNumberOfPages:kImageCount]; 2.   cur ...

  9. go run helper

    # go run helper -a :强制编译相关代码,不论编译代码是否最新 -n :打印编译过程需要用到的命令,但不真正执行他们 -p n :并行编译,n为并行的数量 -v :列出被编译的代码包的 ...

  10. WMI获取计算机信息

    On Error Resume NextstrComputer = "."strInfo = ""Set objWMIService = GetObject(& ...