diff --git a/scss/forms/_floating-labels.scss b/scss/forms/_floating-labels.scss index 38df115561..66afa0a24b 100644 --- a/scss/forms/_floating-labels.scss +++ b/scss/forms/_floating-labels.scss @@ -1,3 +1,14 @@ +// We use mixins instead of placeholders as placeholders would combine the selectors when @extend-ed + +@mixin form-floating-active-input-styles() { + padding-top: $form-floating-input-padding-t; + padding-bottom: $form-floating-input-padding-b; +} + +@mixin form-floating-active-label-styles() { + transform: $form-floating-label-transform; +} + .form-floating { position: relative; @@ -38,19 +49,17 @@ &:focus, &:not(:placeholder-shown) { - padding-top: $form-floating-input-padding-t; - padding-bottom: $form-floating-input-padding-b; + @include form-floating-active-input-styles(); } + // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped &:-webkit-autofill { - padding-top: $form-floating-input-padding-t; - padding-bottom: $form-floating-input-padding-b; + @include form-floating-active-input-styles(); } } > .form-select { - padding-top: $form-floating-input-padding-t; - padding-bottom: $form-floating-input-padding-b; + @include form-floating-active-input-styles(); padding-left: $form-floating-padding-x; } @@ -59,13 +68,13 @@ > .form-control-plaintext, > .form-select { ~ label { - transform: $form-floating-label-transform; + @include form-floating-active-label-styles(); } } // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped > .form-control:-webkit-autofill { ~ label { - transform: $form-floating-label-transform; + @include form-floating-active-label-styles(); } } > textarea:focus, @@ -95,3 +104,21 @@ color: $form-floating-label-disabled-color; } } + +// Todo in v6: Consider combining this with the .form-control-plaintext rules to reduce some CSS? +.form-floating-always { + > .form-control { + @include form-floating-active-input-styles(); + + &::placeholder { + color: $input-color; + } + &:focus::placeholder { + color: $input-placeholder-color; + } + } + + > label { + @include form-floating-active-label-styles(); + } +} diff --git a/site/src/content/docs/forms/floating-labels.mdx b/site/src/content/docs/forms/floating-labels.mdx index dd2db0813e..00748de95e 100644 --- a/site/src/content/docs/forms/floating-labels.mdx +++ b/site/src/content/docs/forms/floating-labels.mdx @@ -129,6 +129,19 @@ When using `.input-group` and `.form-floating` along with form validation, the ` `} /> +## Always floating + +Make any `.form-control` always use a floating label with visible placeholder with the `.form-floating-always` modifier class. Visible placeholders use the default input `color` and lighten to the placeholder color on focus. This matches them with other floating labels built with plaintext inputs and selects. + + + + + +
+ + +
`} /> + ## Layout When working with the Bootstrap grid system, be sure to place form elements within column classes.