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

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

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