Change floating label background-color to transparent

[Nickiam7]

Description

Floating labels have a background-color set to $input-bg. This can look odd if an input uses a browsers native autocomplete which adds a light blue background to the input. Additionally, if a sites design requires styling of input background colors the floating label will appear with the $input-bg color on top of the input background color.

Motivation & Context

Removes the need to manually override the floating label background color.

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-39480--twbs-bootstrap.netlify.app/docs/5.3/forms/floating-labels/

[theodorejb]

• Before/after demo: https://stackblitz.com/edit/bs-floating-label-bg?file=index.html
• Light theme screenshot:
  
• Dark theme screenshot:
  

[Nickiam7]

@theodorejb thanks for adding screenshots!

[mdo]

The background color was added to ensure labels were legible on multi-line inputs or textareas.

[theodorejb]

@mdo Is there an example where it improves legibility? It seems like the label background is only visible when an input is autofilled.

[julien-deramond]

Here's an example where a solid background is useful:

With the fix in this PR:

[theodorejb]

@julien-deramond Ah, that is useful for when textarea contents are scrolled.

[Nickiam7]

Thanks for the context @mdo and thanks for the screenshots @julien-deramond! It does make sense for textareas, I def agree.

Does it makes sense to apply this fix to an input field of type password and email since those will almost always be single line inputs? Or I could just make a note how to adjust the css to fix this in the docs.

[mdo]

Does it makes sense to apply this fix to an input field of type password and email since those will almost always be single line inputs? Or I could just make a note how to adjust the css to fix this in the docs.

I don't think there was any particular reason we didn't special case this based on the HTML element. I'm down to see if we can scope the addition of the background-color to just the textarea. Want to take a crack?