Chrome 自动填充的表单是淡黄色的背景怎么办!
chrome浏览器自动填充表单的黄色背景高亮(#FAFFBD
)一直困扰着我,我之前没想着理它,可是最近一个登陆框,需要用到图标,于是我草率的直接设置在input
元素里面,结果问题就来了,很难看很难看,因此还是总结一下。
这个问题,在2008年的时候就已经存在了,隔了好几年了,在chromium上面可以找到 Issue 46543,但是官方好像没有理这个问题,英文没怎么看懂,谁理解的,可以给大家分享一下。
思路一: 打补丁
Webkit内核的浏览器有一个-webkit-autofill
私有属性,
通过审查元素可以看到这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性,然后对其赋予以下样式:
1 |
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { |
因此我们就会想到覆盖这个样式,代码如下,但是依然不能覆盖原有的背景、字体颜色。需要注意的是:加 !important
依然不能覆盖原有的背景、字体颜色,除了chrome默认定义的background-color
,background-image
,color
不能用 !important
提升其优先级以外,其他的属性均可使用!important
提升其优先级。
1 |
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { |
情景一:input文本框是纯色背景的
解决办法:
1 |
input:-webkit-autofill { |
情景二:input文本框是使用图片背景的
解决办法:
1 |
if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) |
下面的js不是太靠谱
1 |
if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) { |
思路二: 关闭浏览器自带填充表单功能
设置表单属性 autocomplete="off/on"
关闭自动填充表单,自己实现记住密码
1 |
<!-- 对整个表单设置 --> |
网上大部分文章是使用Cookie实现记住用户名、密码。不管是在前端,还是后端都可以实现。本文不对Cookie存储展开讨论。可自行谷歌
原文:http://zcoder.cn/2015/01/14/front-end/chrome-autofill/
Chrome 自动填充的表单是淡黄色的背景怎么办!的更多相关文章
- Chrome 自动填充的表单是淡黄色的背景
Chrome 自动填充的表单是淡黄色的背景解决方案; input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #fff inset; - ...
- Chrome 自动填充的表单是淡黄色的背景,有方法自定义吗
input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset; }
- 结合Bootbox将后台JSON数据填充Form表单
本文介绍了如何结合Bootbox将后台JSON数据填充到Form表单中,同时也介绍了一些需要使用的知识的学习途径,并附上了参考文档地址与学习网址,对此感兴趣的伙伴可以直接访问学习.为了方便介绍,使用了 ...
- jquery自动将form表单封装成json的具体实现
前端页面:<span style="font-size:14px;"> <form action="" method="post&q ...
- Java 创建、填充PDF表单域
表单域,可以按用途分为多种不同的类型,常见的有文本框.多行文本框.密码框.隐藏域.复选框.单选框和下拉选择框等,目的是用于采集用户的输入或选择的数据.下面的示例中,将分享通过Java编程在PDF中添加 ...
- FXForms,自动生成iOS表单
1.简介 FXForms是一个简单的表单提交框架,他的作者是鼎鼎大名的 Nick Lockwood,你也许听说过他的其他的一些框架,比如 iCarousel. 为什么使用FxForms? 表单处理简单 ...
- form表单中只有一个input时,按回车键后表单自动提交(form表单的一个小坑)
form中只有一个input按回车键表单会自动提交 在一个form表单中,若只有一个input,按回车键表单会自动提交,但是当表单中存在多个input时,按回车键不会执行任何操作,这是form表单的一 ...
- Select下拉列表选择自动提交form表单数据
HTML代码: <form action='__CONTROLLER__/index' method="get" id="myform"> < ...
- puppeteer 填充基础表单
main.js const pptr = require("puppeteer"); const gotoUrl = "http://127.0.0.1:5500/ind ...
随机推荐
- ZendStudio9之SVN项目代码提示丢失解决
前几天转移服务器,SVN 也重建了个,但用着重建的项目发现代码提示丢失了...好郁闷..搞了半天终于找到解决的方法了! 如果你还保留有以前的 SVN 项目本地完整备份,可以直接拷贝以下三个文件到新项目 ...
- nl2br()与nl2p()函数,php在字符串中的新行(\n)之前插入换行符
使用情景 很多场合我们只是简单用textarea获取用户的长篇输入,而没有用编辑器.用户输入的换行以“\n”的方式入库,输出的时候有时候会没有换行,一大片文字直接出来了.这个时候可以根据库里的“\n” ...
- Dojo的UI框架bootstrap for dojo和Dojo-Bootstrap简介
最近在学习Dojo,但样式问题真是头疼呀,虽然清新的淡蓝色很是减缓眼睛的疲劳,但这个扁平化简约风盛行的年代,光是清新的拟物已经满足不了群众的需求了,所以就在这样的需求下,我知道了bootstrap f ...
- jsp中,对window对象的简单总结
window的对象有: alert(message) 弹出一个警示对话框confirm(message) 弹出一个确认对话框prompt(message,defaultmessage) 弹出一个提示对 ...
- ucenter无法双向同步setting[allowsynlogin]为0问题解决
深入探索ucenter各种通信失败问题飞狐ITWeb问题描述:A,B两个应用,A的登录操作等同步到B,而B无法同步到A,即只能从A单向同步到B,AB之间没有实现双向同步以前碰到过没记录,这次记录下来查 ...
- concurrent实用类
improt java.util.concurrent.atomic.AtomicLong; import java.util.concurrent.RejectedExecutionHandler; ...
- CentOS7 citus9.5 集群安装及管理
1 所有节点配置 #------服务安装 服务yum update -y #------扩展依赖安装yum install -y epel-release && yum update ...
- A标签-一个按钮样式
该文件引用jquery-1.11.3.js库 <!doctype html> <html> <head> <meta charset="UTF-8& ...
- JMeter+ant+jenkins自动化持续集成
一.ant安装配置 1.官网下载地址:http://ant.apache.org/bindownload.cgi 对应的操作系统选择对应的版本下载,本文以windows为列,下载后解压到本地 2.设置 ...
- window.open实现模式窗口(只弹出一个window.open)
父页面 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> & ...