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

Question

我使用了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;
}