Merge 8446581c3d08c7ac0633e039aaf5e33084710925 into 380a1d738b221fecc964260add053997399be4d4

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();
+    }
+  }
+}

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") {

site/src/content/docs/forms/floating-labels.mdx

@@ -129,6 +129,19 @@ When using `.input-group` and `.form-floating` along with form validation, the `
     </div>
   </div>`} />
 
+## 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.
+
+<Example code={`<div class="form-floating form-floating-always mb-3">
+    <input type="email" class="form-control" id="alwaysFloatingInput" placeholder="name@example.com">
+    <label for="alwaysFloatingInput">Email address</label>
+  </div>
+  <div class="form-floating form-floating-always">
+    <input type="password" class="form-control" id="alwaysFloatingPassword" placeholder="••••••••">
+    <label for="alwaysFloatingPassword">Password</label>
+  </div>`} />
+
 ## 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
 
 <ScssDocs name="form-floating-variables" file="scss/_variables.scss" />
+
+### Sass mixins
+
+<AddedIn version="5.4.0" />
+
+<ScssDocs name="form-floating-mixins" file="scss/mixins/_forms.scss" removeIndentation={false} />