java谷歌填表_chrome自动填表会遮挡input中背景图的问题解决方法

在做某项目登录界面时，发现用户密码框在Chrome自动填充时，input中的背景框会被遮住。网上也搜了一下，没有一个有效的解决方法。

来看csdn的登录界面，也有这个问题。

后来在浏览网页时，无意中发现某网站的登录页面没有这个问题，于是分析了下它的css，照着试了一下，真的完美解决。我做的效果：

原理很简单，下面一个 div，上面放 div(显示图片) + input，把图片div放在input的上面。

图片div的css：

.user {background:url("/images/login/icon_user.png");background-repeat:no-repeat; background-position: 5px center;}

.icon-position {z-index:3;position:relative;height:40px;width:28px;}

输入框的css：

.input-position {margin-top:-40px;padding-left:34px;width:340px;}

.input-style {border:1px solid #dedede;border-radius:4px;font-size:14px;font-family:微软雅黑,黑体;vertical-align:middle;height:40px;line-height:40px;outline:0px;}

HTML片段：

java谷歌填表_chrome自动填表会遮挡input中背景图的问题解决方法相关推荐

JAVA Cannot find class [×××] for bean with name ‘××‘ defined in class path resource [×××] 问题解决方法
JAVA Cannot find class [×××] for bean with name '××' defined in class path resource [×××] 问题解决方法参考文 ...
java中使用es的dsl_基于DSL的基于图论的Java程序中输入图数据的方法
java中使用es的dsl 我们大多数人已经编写了一些处理图论算法的程序,例如找到两个顶点之间的最短路径,找到给定图的最小生成树等等. 在这些算法的每一种中,表示图形的编程方式是使用邻接矩阵或邻接列表 ...
java基础—自定义一个比较器，对TreeSet 集合中的元素按指定方法来排序(java集合六)
自定义一个比较器,对TreeSet 集合中的元素按指定方法来排序 import java.util.Comparator; import java.util.Iterator; import java ...
java求最大子串_Java获取两个字符串中最大相同子串的方法
"abcwerthelloyuiodef" "cvhellobnm" 思路: 1,将短的那个子串按照长度递减的方式获取到. 2,将每获取到的子串去长串中判断是否 ...
【暑假学习笔记】之——用Intellij idea新建一个java web+Servlet项目（有实例）——idea中快速重写父类的方法
Intellij idea中快速重写父类方法在写java文件时,有时候需要重写父类方法,但在idea中创建java文件时并不会像eclipse一样可以选择父类,但是重写父类方法其实只需要这样做: 鼠 ...
java idle耗时_chrome中性能分析工具分析页面中Idle（空闲时间）占用太长时间，会不会影响页面性能，如果会是什么原因造成的？...
看了楼上诸多回答,真是为现在前端开发者捏了一把汗啊!题主不懂就罢了,答题的人不懂也硬往上凑,你们心可真大啊-- 吐槽完毕,正经回答一下. 这里的 idle 含义是复合性质的,不能完全等同于服务器加载的 ...
java sftp mget_总结三种Shell脚本编程中避免SFTP输入密码的方法
最近编程中用到sftp上传文件,且需要用crontab预设定时上传事件.而sftp不同于ftp,没有提供选项如 -i 可以将密码直接编码进程序.使用sftp指令,会自动请求用户输入密码. 总结一下可以 ...
JAVA加载JAR包并调用JAR包中某个类的某个方法
package com.example; public class Runner implements Runnable{ public void run(String name) {System.o ...
自动还原pcap数据包中文件的几种方法
本文介绍如何使用wireshark和python分别对pcap数据包中的文件内容进行自动和手动的还原. wireshark在分析数据包的时候,常常会遇到一些wireshark自身无法解码的数据内容,如 ...

java谷歌填表_chrome自动填表会遮挡input中背景图的问题解决方法

java谷歌填表_chrome自动填表会遮挡input中背景图的问题解决方法相关推荐

最新文章

热门文章