Fatal编程技术网
  • css/
  • Css 自动完成时浮动标签的不良行为

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

css bootstrap-4

Css 自动完成时浮动标签的不良行为,css,bootstrap-4,floating-labels,Css,Bootstrap 4,Floating Labels,我使用了来自的示例 如果浏览器已在自动完成上具有凭据，的布局将中断 仅当窗口/文档具有焦点时，浮动标签的动画（以及大小和边距属性）才会启动 如何预防这些问题 我找到了CSS属性：-webkit autofill，或者尝试聚焦第一个输入字段，但问题不会得到解决 预览： 我找到了答案 默认情况下，仅当占位符不可见时，标签才会设置样式： 。表单标签组输入：非（：显示占位符）~label{ 垫面：25rem； 底部填充物：25rem； 字体大小：12px； 颜色：#777； } 诀窍是，如果自动填充显

我使用了来自的示例

如果浏览器已在自动完成上具有凭据，
的布局将中断

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

如何预防这些问题

我找到了
CSS
属性
：-webkit autofill
，或者尝试聚焦第一个
输入
字段，但问题不会得到解决

预览：

我找到了答案

默认情况下，仅当
占位符不可见时，标签才会设置样式：


。表单标签组输入：非（：显示占位符）~label{
垫面：25rem；
底部填充物：25rem；
字体大小：12px；
颜色：#777；
}


诀窍是，如果
自动填充
显示有
：-webkit autofill
，则设置相同的
属性
：


。表单标签组输入：不（：显示占位符）~label，

.form label group input:-webkit autofill~label/*为了让CHROME和FIREFOX更好地使用，我不得不将上面的建议分成两个单独的css规则


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



顺便说一句，
：显示的占位符仅在有占位符时有效，因此有时您需要提供
占位符=“
”，即使您不想显示占位符。