diff --git a/scss/forms/_floating-labels.scss b/scss/forms/_floating-labels.scss index 38df115561b8..ddda156511aa 100644 --- a/scss/forms/_floating-labels.scss +++ b/scss/forms/_floating-labels.scss @@ -36,21 +36,23 @@ color: transparent; } + &:focus::placeholder { + color: $input-placeholder-color; + } + &: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 +61,23 @@ > .form-control-plaintext, > .form-select { ~ label { - transform: $form-floating-label-transform; + @include form-floating-active-label-styles(); + + &::after { + position: absolute; + inset: $form-floating-padding-y ($form-floating-padding-x * .5); + z-index: -1; + height: $form-floating-label-height; + content: ""; + background-color: $input-bg; + @include border-radius($input-border-radius); + } } } // 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 +107,22 @@ 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-floating, + .form-floating { + .form-control { + @include form-floating-active-input-styles(); + + &::placeholder, + &:focus::placeholder { + color: $input-placeholder-color; + } + } + + label { + @include form-floating-active-label-styles(); + } + } +} diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss index 00b476413463..5f1d3a2081e7 100644 --- a/scss/mixins/_forms.scss +++ b/scss/mixins/_forms.scss @@ -1,6 +1,18 @@ // This mixin uses an `if()` technique to be compatible with Dart Sass // See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details +// scss-docs-start form-floating-mixins +@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() { + color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity}); + transform: $form-floating-label-transform; +} +// scss-docs-end form-floating-mixins + // scss-docs-start form-validation-mixins @mixin form-validation-state-selector($state) { @if ($state == "valid" or $state == "invalid") { diff --git a/site/src/content/docs/forms/floating-labels.mdx b/site/src/content/docs/forms/floating-labels.mdx index dd2db0813e12..0d83ce385405 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. @@ -158,3 +171,9 @@ When working with the Bootstrap grid system, be sure to place form elements with ### Sass variables + +### Sass mixins + + + +