在做某項(xiàng)目登錄界面時(shí)，發(fā)現(xiàn)用戶密碼框在Chrome自動(dòng)填充時(shí)，input中的背景框會(huì)被遮住。網(wǎng)上也搜了一下，沒有一個(gè)有效的解決方法。

來看csdn的登錄界面，也有這個(gè)問題。

后來在瀏覽網(wǎng)頁時(shí)，無意中發(fā)現(xiàn)某網(wǎng)站的登錄頁面沒有這個(gè)問題，于是分析了下它的css，照著試了一下，真的完美解決。我做的效果：

原理很簡單，下面一個(gè) 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片段：

總結(jié)

以上是生活随笔為你收集整理的java谷歌填表_chrome自动填表会遮挡input中背景图的问题解决方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。