去除chome表单自动填充样式

CSS:

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { /* 延迟动画 */
    -webkit-transition-delay: 9999s;
    transition-delay: 9999s;
    -webkit-transition: color 9999s ease-out, background-color 9999s ease-out;
    transition: color 9999s ease-out, background-color 9999s ease-out;
}

input:-webkit-autofill { /* 阴影透明,背景色效果 */
    -webkit-box-shadow: 0 0 0px 1000px transparent inset;
    box-shadow: 0 0 0px 1000px transparent inset;
    border: 1px solid #ccc !important;
}

原文地址:https://www.cnblogs.com/xtreme/p/12166110.html

时间: 2024-07-30 10:47:04

去除chome表单自动填充样式的相关文章

chrome浏览器当表单自动填充时,怎么去除浏览器自动添加的默认样式。

参考blog来自 http://segmentfault.com/q/1010000000671971 chrome浏览器当表单自动填充时,怎么去除浏览器自动添加的默认样式. 一.发现该问题的原因-是在写账号登录页面时,input表单添加了背景图片,当自动填充,搓搓的一坨淡黄色背景出来. 这个原因是我草率的直接设置在input元素里面,结果问题就来了.所以如果把这个图标放在input表单外面,就不会出现这个问题. 二.表单自动填充会添加浏览器默认样式怎么处理和避免 第二张图,就是表单自动填充后,

chrome表单自动填充导致input文本框背景变成偏黄色问题解决

chrome表单自动填充导致input文本框背景变成偏黄色问题解决 作者:佚名 字体:[增加 减小] 来源:互联网 时间:08-21 18:43:32我要评论 chrome表单自动填充后,input文本框的背景会变成偏黄色的,想必大家都会碰到这种情况吧,这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性造成的,解决方法如下,感兴趣的朋友可以了解下 chrome表单自动填充后,input文本框的背景会变成偏黄色的,这是由于chrome会默认

chrome表单自动填充去掉input黄色背景解决方案

chrome表单自动填充后,input文本框的背景会变成偏黄色的,这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性,然后对其赋予以下样式: input:-webkit-autofill { background-color: #FAFFBD; background-image: none; color: #000; } 在有些情况下,这个黄色的背景会影响到我们界面的效果,尤其是在我们给input文本框使用图片背景的时候,原来的圆角和边框

#-webkit-autofill##google#启用表单自动填充时,如果覆盖黄色背景

google和opera浏览器的表单自动填充后,输入框均会变成黄色背景,黑色字体.如下图. 这样的话会与网页的整体设计风格不一致,怎样自定义样式,来覆盖黄色背景. 首先来看看是什么导致的,右键查看元素样式: input:-webkit-autofill,textarea:-webkit-autofill, select:-webkit-autofill{ background-color: rgb(250, 255, 189); background-image: none; color: rg

#-webkit-autofill##google#启用表单自动填充时,如何覆盖黄色背景

#-webkit-autofill##google#启用表单自动填充时,如何覆盖黄色背景 google和opera浏览器的表单自动填充后,输入框均会变成黄色背景,黑色字体.如下图. 这样的话会与网页的整体设计风格不一致,怎样自定义样式,来覆盖黄色背景. 首先来看看是什么导致的,右键查看元素样式: input:-webkit-autofill,textarea:-webkit-autofill, select:-webkit-autofill{ rgb(250, 255, 189); backgr

用户登录记住用户名导致表单自动填充bug解决方法

最近做项目出现了一个极其讨厌的bug:在用户登录网站时,浏览器会自动提示是否记住密码,当选择记住密码时,正常浏览网页,会发现有那么几个input输入框会自动填充用户名,非常讨厌, 于是就觉得挺简单的一个bug,想了几种解决办法: 方法一:利用html5表单新增属性 autocomplete="off",刷新后尝试,并没有卵用: 方法二:利用js来控制,进入页面时,给input表单设置value为空,心想这下可以了吧,结果还是没毛用: 方法三:给input表单设置只读属性 readonl

防止表单自动填充用户名和密码

部分浏览器支持:autocomplete="off" 所以浏览器支持: 在会自动填充的from内加下面两家代码 <input style="display:none" type="text" name="fakeusernameremembered"/> <input style="display:none" type="password" name="fak

前端开发入门到实战:css实现修改浏览器自动填充表单的默认样式

当表单中存在input[password]的时候,采用submit方式提交.就会触发浏览器自动填充表单.比如chrome自动填充后,淡×××输入框代替了背景样式,看起来有些怪异. ?那么如何通过css实现取消浏览器自动填充表单的默认样式呢? 解决方法一: 当input文本框是纯色背景的,可以对input:-webkit-autofill使用足够大的纯色内阴影来覆盖input输入框的×××背景:如: input:-webkit-autofill { -webkit-box-shadow: 0 0

web前端入门到实战:css实现修改浏览器自动填充表单的默认样式

当表单中存在input[password]的时候,采用submit方式提交.就会触发浏览器自动填充表单.比如chrome自动填充后,淡慌色输入框代替了背景样式,看起来有些怪异. 那么如何通过css实现取消浏览器自动填充表单的默认样式呢? 解决方法一: 当input文本框是纯色背景的,可以对input:-webkit-autofill使用足够大的纯色内阴影来覆盖input输入框的慌色背景:如: web前端开发学习Q-q-u-n: 767273102 ,分享学习的方法和需要注意的小细节,不停更新最新