自动完成时浮动标签的不良行为

Question

我使用了Floating labels中的Bootstrap 4.3示例。

如果浏览器已经具有自动完成功能的凭据，则<input>的布局将中断。

仅当窗口/文档具有焦点时，浮动标签的动画（以及大小和边距属性）才会开始。

我如何预防这些问题？

我找到了CSS属性:-webkit-autofill，或尝试将重点放在第一个input领域，但问题不会得到解决。

预览：

Answer 1

我找到了答案。

默认情况下，只有在placeholder不可见的情况下，标签才会设置样式：

.form-label-group input:not(:placeholder-shown) ~ label {
    padding-top: .25rem;
    padding-bottom: .25rem;
    font-size: 12px;
    color: #777;
}

诀窍是，如果properties带有autofill，则设置相同的:-webkit-autofill：

.form-label-group input:not(:placeholder-shown) ~ label,
.form-label-group input:-webkit-autofill ~ label /* <<<< Add these */
{
    padding-top: .25rem;
    padding-bottom: .25rem;
    font-size: 12px;
    color: #777;
}

Answer 2

我最终不得不将上面的建议分为2个单独的CSS规则，以使CHROME和FIREFOX变得不错

.form-label-group input:not(:placeholder-shown) ~ label {
        padding-top: .25rem;
        padding-bottom: .25rem;
        font-size: 12px;
        color: #777;
    }

.form-label-group input:-webkit-autofill ~ label {
    padding-top: .25rem;
    padding-bottom: .25rem;
    font-size: 12px;
    color: #777;
}