chrome自动填表会遮挡input中背景图的问题解决方法

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

来看csdn的登陆界面,也有这个问题。网站

 

后来在浏览网页时,无心中发现某网站的登陆页面没有这个问题,因而分析了下它的css,照着试了一下,真的完美解决。我作的效果:url

 

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

 

图片div的css:code

.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:blog

.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>
相关文章
相关标签/搜索