Floating labels: Fix disabled ::before since it was using the wrong bg-color

[louismaximepiton]

Description

Add a way to change the ::before background color by adding .disabled to .form-floating

Motivation & Context

It solves #37125 (comment) and above.
The previous selector didn't seem to work.

Type of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Refactoring (non-breaking change)
• Breaking change (fix or feature that would change existing functionality)

Checklist

• I have read the contributing guidelines
• My code follows the code style of the project (using npm run lint)
• My change introduces changes to the documentation
• I have updated the documentation accordingly
• I have added tests to cover my changes
• All new and existing tests passed

Live previews

• https://deploy-preview-38007--twbs-bootstrap.netlify.app/docs/5.3/forms/floating-labels#disabled

Related issues

NA

[saranglakare]

I was personally more interested in fix for the textarea where input text overlaps with floating label. This is in the released version 5.3:

And it's working fine after your change (this PR):

Requesting mods to please merge this PR as the textarea with floating label is just not usable right now. Thanks!

[julien-deramond]

Thanks for the PR @louismaximepiton. I'll try to look at it asap. Indeed, apparently, there were several PRs tackling different topics regarding floating labels that broke eachother.

[saranglakare]

Here's one UI suggestion to improve the floating label - put it on the outline instead of inside:

[louismaximepiton]

Yes why not, it has to be discussed a bit with the core team before implementing it. I think you could open an issue/discussion to propose and discuss about this refactoring 😄

[julien-deramond]

TBH I haven't found any other way to fix this issue so that the rendering remains consistent between all use cases without having something like the :has selector.

So this PR looks good to me even if it has an impact for the users who'd need to add .disabled to .form-floating.
It fixes the issue with the textareas and the disabled rendering; both broken in the main branch.

In order to try to tackle the different issues around floating labels. I'd suggest to insert in this PR the work done in #38023, but slightly differently. I'd suggest to do it this way to handle the read-only cursor rendering:

diff --git a/scss/forms/_floating-labels.scss b/scss/forms/_floating-labels.scss
index acae3fd68..09cd7d81e 100644
--- a/scss/forms/_floating-labels.scss
+++ b/scss/forms/_floating-labels.scss
@@ -7,11 +7,16 @@
     left: $input-border-width;
     width: subtract(100%, add($input-height-inner-quarter, $input-height-inner-half));
     height: $form-floating-label-height;
+    pointer-events: none;
     content: "";
     background-color: $input-bg;
     @include border-radius($input-border-radius);
   }
 
+  &.readonly::before {
+    pointer-events: all;
+  }
+
   > .form-control,
   > .form-control-plaintext,
   > .form-select {
diff --git a/site/content/docs/5.3/forms/floating-labels.md b/site/content/docs/5.3/forms/floating-labels.md
index 6b33fb67b..ffcac0e8a 100644
--- a/site/content/docs/5.3/forms/floating-labels.md
+++ b/site/content/docs/5.3/forms/floating-labels.md
@@ -108,11 +108,11 @@ Add the `disabled` boolean attribute on an input, a textarea or a select to give
 Floating labels also support `.form-control-plaintext`, which can be helpful for toggling from an editable `<input>` to a plaintext value without affecting the page layout.
 
 {{< example >}}
-<div class="form-floating mb-3">
+<div class="form-floating readonly mb-3">
   <input type="email" readonly class="form-control-plaintext" id="floatingEmptyPlaintextInput" placeholder="name@example.com">
   <label for="floatingEmptyPlaintextInput">Empty input</label>
 </div>
-<div class="form-floating mb-3">
+<div class="form-floating readonly mb-3">
   <input type="email" readonly class="form-control-plaintext" id="floatingPlaintextInput" placeholder="name@example.com" value="name@example.com">
   <label for="floatingPlaintextInput">Input with value</label>
 </div>

Here again, it would have an impact for the end-user who would need to add .readonly to the .floating-label.

(we could add the "Co-authored" label in the final commit to merge everyone's ideas)

/cc @patrickhlauke for info on how we could tackle everything in the same PR around floating labels

[mdo]

Another option in #38313.

[mdo]

Thinking #38313 will be a more straightforward fix for now. Might be able to do something more in v6 where we don't need so many extra rules and what not.