webkit中的自动完成输入中的精灵消失

Question

这是我的登录表单：http://cssdeck.com/labs/wvpad3mc

我对webkit有一个很好的问题:如果我在Chrome中保存了我的密码，并且加载了我的登录页面，Chrome将我的登录和密码传递给输入和隐藏精灵

没有保存的密码：http://i.stack.imgur.com/dNu9G.jpg

和with (禁用Chrome精灵)：http://i.stack.imgur.com/oqhsT.jpg

有没有人知道如何使精灵留在自己的位置而不禁用自动完成功能？

(很抱歉链接，还不能添加图像)

更新(附答案)：

正如@Allan所提到的，只有一种方法(使用不同的方法)来做出合适的事情。因为由于这件奇妙的事情：https://code.google.com/p/chromium/issues/detail?id=46543，这是一个众所周知的bug，它从2010年以来一直延伸到整个宇宙！为什么Google开发团队没有修复它已经是未知领域的奥秘。

这是我的新密码，解决了我的案子。

您也可以使用字体图标，而不是跨(或div)或其他:伪魔术。

Answer 1

也许你可以做这样的事。

这是我的小提琴

http://jsfiddle.net/t0dhk8hr/1/

这是我的CSS

.myInput {
    position: relative;
    outline: rgba(0,0,0,.2) dashed 1px;
    padding: 5px;
}

.Text {
    border: #666 solid;
    border-width: 1px 1px 1px 0px;
    clear: both;
}
span.icon {
    float: left;
    border: #666 solid;
    border-width: 1px 0px 1px 1px;
    background: white;
    display: inline-block;
    width: 25px;
    height: 17px;
    margin: 2px -2px;
}
span.icon.one {
    background: url(http://sweetclipart.com/multisite/sweetclipart/files/cat_3_orange.png) no-repeat center center transparent;
    background-size: 12px 12px;
}
span.icon.two {
    background: url(http://www.tomstuder.com/wp-content/uploads/2012/07/dog-011.png) no-repeat center center transparent;
    background-size: 12px 12px;
}

这是我的HTML

<div class="myInput">

    <input type="text" class="Text" placeholder="Username" />
    <span class="icon one"></span>
</div>
<div class="myInput">

    <input type="password" class="Text" placeholder="Password" />
    <span class="icon two"></span>
</div>

还有其他的是想出同样的视觉效果，但这是一个。另一个方法是：.myInput类上的元素，这样我们就不需要在那个dom元素中定义span，而是需要在使用.myInput的同一项中为每个图标定义一个额外的类。

Answer 2

你的问题是Chrome在自动填充数据时会改变某些字段的背景样式。

您可以使用一个简单的伪选择器覆盖它：

:-webkit-autofill {
    background: #FFF;
}

在您的例子中，您只需要将您的sprite URL输入到其中，如下所示：

.auth-inputs input:-webkit-autofill {
    background: #fff url(http://www.red-team-design.com/wp-content/uploads/2011/09/login-sprite.png) no-repeat;
}

虽然我不建议链接到其他人的sprite文件，但我建议将您自己的sprite上传到您的服务器。

如果您正在寻找更多信息，您可能希望访问：Google Chrome窗体自动填充及其黄色背景或删除铬自动完成的输入背景颜色？