谷歌浏览器保存密码后输入框背景色变成黄色,会影响原来的输入框样式,css样式input:-webkit-autofill可以改变输入框样式,background-color,background-image,color这三个属性无法通过!important覆盖原来样式,设置优先级,只能通过其他的样式(例如,box-shadow来覆盖黄色背景),但是如果原来的输入框背景是透明的或者是图片之类的,就没办法用这样的方式去修改,所以我采取禁用保存密码功能。比较简单就可以实现禁用功能的方法是,将表单的type='password'设置成text,添加focus事件改变type属性onfocus="this.type='password'" 再加上autocomplete='off'就可以达到禁止保存密码功能了。当然,通过js代码也是可以实现这个功能的,但是我觉得这样子比较简单方便。

禁止chrome记住密码的更多相关文章

  1. 表单提交对chrome记住密码的影响

    在处理注册.登录等含有用户名,密码的元素的表单时,chrome会主动的提示记住密码,然而这个功能在用户名的选择上真是耐人寻味,它总是寻找离password input控件最近的那一个文本框的内容,作为 ...

  2. 去掉chrome记住密码后自动填充表单的黄色背景

    chrome表单自动填充后,input文本框的背景会变成黄色的,通过审查元素可以看到这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性,然后对 ...

  3. 如何修改chrome记住密码后自动填充表单的黄色背景 ?

    input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { background-color: rgb(2 ...

  4. chrome输入框记住密码导致背景黄色的解决方案

    在form头部增加以下内容 <input type="text" style="display:hidden;"> <input type=& ...

  5. React中禁止chrome填充密码表单

    当 input 的 type="password" 时,chrome浏览器会以 type="password" 为标识记住输入的用户名和密码, 如果chrome ...

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

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

  7. chrome表单禁止自动填充密码

    在用户登录成功以后,chrome会提示用户记住密码. 用户退出以后若前往注册.忘记密码页时会自动填充密码. 若不希望自动填充密码,只需在input里设置autoComplete="new-p ...

  8. 记住密码"功能的正确设计

    Web上的用户登录功能应该是最基本的功能了,可是在我看过一些站点的用户登录功能后,我觉得很有必要写一篇文章教大家怎么来做用户登录功能.下面的文章告诉大家这个功能可能并没有你所想像的那么简单,这是一个关 ...

  9. vue项目实现记住密码功能

     一.谷歌浏览的残留问题 现在很多的网站都有一个需求是记住密码这个功能,为的是避免用户下次登录的时候繁琐的输入过程. 像是一些主流的浏览器(比如Chrome)都有了这个功能,而且如果你登录了Chrom ...

随机推荐

  1. 原创:CSS3技术-雪碧图自适应缩放与精灵动画方案

    花了一个礼拜完成了慕课网定制的七夕主题效果,其中有一个没实现好的功能,就是雪碧图的自适应缩放 ps: 以下实现都是基于移动端的处理 原图如下: 人物是采用的是雪碧图,通过坐标绝对数据取值 问题很明显, ...

  2. Android ButterKnife配置使用

    ButterKnife在GitHub的地址:https://github.com/JakeWharton/butterknife 最新的版本是:8.4.0 app 模块的build.gradle: a ...

  3. Hawk 1.2 快速入门2 (大众点评18万美食数据)

    本文将讲解通过本软件,获取大众点评的所有美食数据,可选择任一城市,也可以很方便地修改成获取其他生活门类信息的爬虫. 本文将省略原理,一步步地介绍如何在20分钟内完成爬虫的设计,基本不需要编程,还能自动 ...

  4. [SQL] SQL 基础知识梳理(一)- 数据库与 SQL

    SQL 基础知识梳理(一)- 数据库与 SQL [博主]反骨仔 [原文地址]http://www.cnblogs.com/liqingwen/p/5902856.html 目录 What's 数据库 ...

  5. 基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步(二)

    我们上一篇<基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步(一)>主要讲解了如何搭建一个实时数据通讯服务器,客户端与服务端是如何通讯的,相信通过上一篇的讲解,再配 ...

  6. C# listview 单击列头实现排序 <二>

    单击列头实现排序,首先在羡慕中添加下面的帮助实现的类:具体的代码: using System; using System.Collections; using System.Windows.Forms ...

  7. HTML5学习

    HTML5动画效果 http://www.html5tricks.com/30-more-html5-apps.html http://www.html5tricks.com/category/htm ...

  8. html+ccs3太阳系行星运转动画之土星有个环,地球有颗小卫星

    在上一篇<html+ccs3太阳系行星运转动画>中实现了太阳系八大行星的基本运转动画. 太阳系又何止这些内容,为丰富一下动画,接下来增加“土星环”和“月球”来充盈太阳系动画. 下面是充盈后 ...

  9. css水平居中的各种方法

    说到水平居中,大家可能觉得很简单啊,text-align:center 就OK了. 但是,有时候会发现这样写了也没出效果.原因是什么呢?  请往下看. 水平居中:分为块级元素居中和行元素居中 行内元素 ...

  10. 使用IdleTest进行TDD单元测试驱动开发演练(1)

    [前言] 开发工具:Visual Studio 2012 测试库:Visual Studio 2012自带的MSTest DI框架:Unity 数据持久层:Entity Framework 前端UI: ...