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片斷：

<div>
   <div class="user icon-position"></div>
   <input type="text" class="input-position input-style" name="username" id="username" placeholder="登陸帳號">
</div>