Add an artificial background to floating labels (#37125)

twbs · Oct 6, 2022 · bf6240d · bf6240d
1 parent 5975ca6
commit bf6240d
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 0 deletions.
diff --git 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
@@ -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 {