Question

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

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

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

使用（Chrome禁用精灵）：http://i.stack.imgur.com/oqhsT.jpg

有没有人知道如何在不禁用自动填充功能的情况下让精灵留在他们的位置？

（对不起链接，暂时无法添加图片）

更新（有答案）：

正如@Allan所提到的，只有一种方法（采用不同的方法）来制作合适的东西。因为这个奇妙的东西：https://code.google.com/p/chromium/issues/detail?id=46543，这是一个众所周知的错误，自2010年以来一直延伸到整个宇宙为什么Google Webkit开发团队不会修复它未知领域的奥秘。

Here is my new code, that solved MY CASE.

您也可以使用font-icons代替spans（或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类中使用:: before元素，这样我们就不需要在dom元素中定义span，但是我们需要为同一个项目中的每个图标定义一个额外的类，其中.myInput是使用

Answer 2

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

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

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

在您的情况下，您只需要输入您的精灵网址，如下：

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

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

如果您正在寻找更多信息，可以访问：Google Chrome form autofill and its yellow background或Removing input background colour for Chrome autocomplete?

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

2 个答案: