html - 在 webkit 中使用自动完成的输入中的 Sprites 消失

Question

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

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

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

还有(Chrome 禁用 Sprite ):http://i.stack.imgur.com/oqhsT.jpg

有谁知道如何在不禁用自动完成功能的情况下让 Sprite 停留在它们的位置上？

(对不起链接，还不能添加图片)

更新(含答案):

正如@Allan 所提到的，只有一种方法(使用不同的方法)来制作合适的东西。因为这件美妙的事情:https://code.google.com/p/chromium/issues/detail?id=46543 ，这是一个众所周知的错误，自 2010 年以来遍及整个宇宙!Google Webkit 开发团队尚未修复它的原因是未知领域之谜。 p>

Here is my new code, that solved MY CASE.

您也可以使用 font-icons 代替 span(或 div)或其他一些:伪魔术。

Answer 1

也许你可以做这样的事情。

这是我的 fiddle

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 元素内定义跨度，但是我们需要为 .myInput 所在的同一元素中的每个图标定义一个额外的类用过。