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

Question

我正在使用 Floating labels example from Bootstrap 4.3。

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

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

我怎样才能避免这些问题？

我找到了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;
}

诀窍是，如果 autofill 与 :-webkit-autofill 一起显示，则设置相同的 properties：

.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 放置 nice

.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;
}

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

Bad behavior of floating-labels when autocomplete

css

bootstrap-4

floating-labels