Question

我需要你的帮助。

我从设计中进行了一些材料设计，例如输入，但是我遇到了自动填充状态的问题。

自动填充输入（在输入中单击时，浮动标签不会移到顶部）。

我为Chrome解决了此问题，因为Chrome具有:-webkit-autofill伪类，但是Firefox呢？

对此有任何破解方法吗？一些JS技巧？

谢谢。

Answer 1

您是否尝试使用autocomplete="off"作为输入？

我认为:-moz-autofill可能会代替:-webkit-autofill。

Answer 2

答案很简单，您只需要检查输入$(this).val();的值即可。

Answer 3

我今天刚玩过同一期杂志，发现：如果将填充输入的css规则分配给:-webkit-autofill并跟随其他选择器，则Firefox只会忽略整个规则集。因此，即使它们完全相同，我也需要将其添加为单独的CSS规则：

.bmd-input :focus ~ label,
.bmd-input .filled ~ label{
    color: rgba(66,66,66,1);
    font-size: 12px;
    top: 0;
    line-height: 24px;
    cursor: default!important;
}
.bmd-input input:-webkit-autofill ~ label,
.bmd-input textarea:-webkit-autofill ~ label{
    color: rgba(66,66,66,1);
    font-size: 12px;
    top: 0;
    line-height: 24px;
    cursor: default!important;
}
.bmd-input input:-moz-autofill ~ label,
.bmd-input textarea:-moz-autofill ~ label{
    color: rgba(66,66,66,1);
    font-size: 12px;
    top: 0;
    line-height: 24px;
    cursor: default!important;
}

在Firefox中检测自动填充的输入

3 个答案: