标签：idt 用户 radius 账号 vertica put span gravity 也有
在做某项目登录界面时，发现用户密码框在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>
标签：idt 用户 radius 账号 vertica put span gravity 也有
原文地址：http://www.cnblogs.com/phpdragon/p/7569911.html
