Add an artificial background to floating labels (#37125)

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 39de77ad623e3429d639f5c0654d17b5f4d4df0e..132c5dbb0e87d22b5963d73d4371eb5255e9395a 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -1002,6 +1002,7 @@ $form-floating-padding-x:         $input-padding-x !default;
 $form-floating-padding-y:         1rem !default;
 $form-floating-input-padding-t:   1.625rem !default;
 $form-floating-input-padding-b:   .625rem !default;
+$form-floating-label-height:      1.875em !default;
 $form-floating-label-opacity:     .65 !default;
 $form-floating-label-transform:   scale(.85) translateY(-.5rem) translateX(.15rem) !default;
 $form-floating-transition:        opacity .1s ease-in-out, transform .1s ease-in-out !default;

diff --git a/scss/forms/_floating-labels.scss b/scss/forms/_floating-labels.scss
index 6e5c9a75f5057403aa5da368863a0c5186dc3437..93c1c220512dd3d04d80e90b42719da55d6c286b 100644 (file)
--- a/scss/forms/_floating-labels.scss
+++ b/scss/forms/_floating-labels.scss
@@ -1,6 +1,17 @@
 .form-floating {
   position: relative;
 
+  &::before {
+    position: absolute;
+    top: $input-border-width;
+    left: $input-border-width;
+    width: subtract(100%, add($input-height-inner-quarter, $input-height-inner-half));
+    height: $form-floating-label-height;
+    content: "";
+    background-color: $input-bg;
+    @include border-radius($input-border-radius);
+  }
+
   > .form-control,
   > .form-control-plaintext,
   > .form-select {