Proposal

diff --git a/scss/forms/_floating-labels.scss b/scss/forms/_floating-labels.scss
index 66afa0a24b4c0b52e140a253b4dffdb161b9dfe5..ddda156511aaaa5603a4e3299a66a5a45f65bd6e 100644 (file)
--- a/scss/forms/_floating-labels.scss
+++ b/scss/forms/_floating-labels.scss
@@ -1,14 +1,3 @@
-// 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;
 
@@ -47,6 +36,10 @@
       color: transparent;
     }
 
+    &:focus::placeholder {
+      color: $input-placeholder-color;
+    }
+
     &:focus,
     &:not(:placeholder-shown) {
       @include form-floating-active-input-styles();
@@ -69,6 +62,16 @@
   > .form-select {
     ~ label {
       @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
@@ -107,18 +110,19 @@
 
 // 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();
+  &.form-floating,
+  .form-floating {
+    .form-control {
+      @include form-floating-active-input-styles();
 
-    &::placeholder {
-      color: $input-color;
-    }
-    &:focus::placeholder {
-      color: $input-placeholder-color;
+      &::placeholder,
+      &:focus::placeholder {
+        color: $input-placeholder-color;
+      }
     }
-  }
 
-  > label {
-    @include form-floating-active-label-styles();
+    label {
+      @include form-floating-active-label-styles();
+    }
   }
 }

diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index 00b47641346375ed5bd8c26551358568605b71f9..5f1d3a2081e7be4c83e54fc6bd20bd4d9c8a047a 100644 (file)
--- 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") {