From bf6240dad9a466e9d3bc682abf416e9e5b4c66df Mon Sep 17 00:00:00 2001
From: Louis-Maxime Piton <louismaxime.piton@orange.com>
Date: Thu, 6 Oct 2022 08:12:00 +0200
Subject: [PATCH] Add an artificial background to floating labels (#37125)

---
 scss/_variables.scss             |  1 +
 scss/forms/_floating-labels.scss | 11 +++++++++++
 2 files changed, 12 insertions(+)

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 39de77ad62..132c5dbb0e 100644
--- 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 6e5c9a75f5..93c1c22051 100644
--- 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 {