chorme 浏览器记住密码后input黄色背景处理方法(两种)

时间:2021-08-09 23:22:15

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

chorme 浏览器记住密码后input黄色背景处理方法(两种)

方法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;
}
   

完美解决

chorme 浏览器记住密码后input黄色背景处理方法(两种)

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. Effective Java 45 Minimize the scope of local variables

    Principle The most powerful technique for minimizing the scope of a local variable is to declare it ...

  2. Calibrating delay loop... 问题以及解决方法(RealARM开发板)

    RealARM的210开发板在启动是有时会出现这样的死循环 Calibrating delay loop... ,那么原因是什么呢? 经过查找,发现跟RTC有关,实际上就是晶振和RTC电源的问题.所以 ...

  3. 在ArcGIS中WGS84大地坐标和投影平面坐标的转换

    以WGS84转换为北京54坐标为例: 首先你要先知道转化的参数,鉴于我国曾使用不同的坐标基准(BJ54.State80.Correct54),各地的重力值又有很大差异,所以很难确定一套适合全国且精度较 ...

  4. msxml 操作xml

    1.简介 在.NET平台,微软为C#或托管C++程序员提供了丰富的类库,用以支持各种需求,其中就有对XML文件操作的丰富的类.例如XMLDocument, XmlElement等.但是C++标准库中并 ...

  5. React 相关资料

    learncodeacademy/react-js-tutorials MobX

  6. L2-013 红色警报 (25 分) (并查集)

    链接:https://pintia.cn/problem-sets/994805046380707840/problems/994805063963230208 题目: 战争中保持各个城市间的连通性非 ...

  7. 第20月第29天 cocoa抽象工厂 cocoapods组件化 cocoapods升级

    1. 在 Cocoa Touch 框架中,类簇是抽象工厂模式在 iOS 下的一种实现,以 NSArray 举例,将原有的 alloc+init 拆开写: id obj1 = [NSArray allo ...

  8. hdu 4455 Substrings(计数)

    题目链接:hdu 4455 Substrings 题目大意:给出n,然后是n个数a[1] ~ a[n], 然后是q次询问,每次询问给出w, 将数列a[i]分成若干个连续且元素数量为w的集合,计算每个集 ...

  9. 在Microsoft Dynamic 365/2016环境使用LinqPad查询数据(不使用linqpad Microsoft Dynamic 365 Driver)

    在Microsoft Dynamic 365/2016环境使用LinqPad查询数据 老规矩,先上效果图: 实体集合: 实体属性: 属性值:  查询出的结果可以导出的格式: 操作步骤: 1.下载Lin ...

  10. 一小时入门webpack

    webpack现在已经成为了大众化的项目必要脚手架,基本上现在的很多项目都需要webpack,由于webpack的出现glup和grunt已经完败,今天我们来说一下webpack如何使用. 首先我们需 ...