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

我用过浮动标签 https://getbootstrap.com/docs/4.3/examples/floating-labels/示例来自引导程序4.3 https://getbootstrap.com/docs/4.3.

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

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

我怎样才能防止这些问题？

我找到了CSS财产:-webkit-autofill，或者尝试集中第一个input领域，但问题并没有解决。

Preview:

我已经找到答案了。

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

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

诀窍是，设置相同properties if the 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;
}