自动完成时浮动标签的不良行为 [英] Bad behavior of floating-labels when autocomplete

问题描述

我使用了

解决方案

我找到了答案.

默认情况下，只有在占位符不可见的情况下，标签才会设置样式:

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

诀窍是，如果 autofill 与:-webkit-autofill :

一起显示，则设置相同的 properties

  .form-label-group输入:not(:placeholder-shown)〜标签，.form-label-group输入:-webkit-autofill〜label/*<<<<添加这些*/{padding-top:.25rem;padding-bottom:.25rem;font-size:12px;颜色:#777;} 

I've using the Floating labels example from Bootstrap 4.3.

If the browser has already credentials on the autocompletement, the layout of <input> will breaks.

The animation (and the size & margin properties) of floating labels will only start, if the window/document has an focus.

How i can prevent these problem?

I've found the CSS propertie :-webkit-autofill, or try to focus the first input field, but the problem will be not solved.

Preview:

解决方案

I've found the answer.

By default, the label will be styled only if the placeholder is not visible:

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

The trick is, to set the same properties if the autofill is presented with :-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;
}

这篇关于自动完成时浮动标签的不良行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！