New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Change floating label background-color to transparent #39480
base: main
Are you sure you want to change the base?
Change floating label background-color to transparent #39480
Conversation
|
@theodorejb thanks for adding screenshots! |
The background color was added to ensure labels were legible on multi-line inputs or textareas. |
@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 Ah, that is useful for when textarea contents are scrolled. |
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. |
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 |
Only apply extra top padding to textareas where it is needed. Also removed unnecessary floating label background for non-textareas (supersedes twbs#39480).
Only apply extra top padding to textareas where it is needed. Also removed unnecessary floating label background for non-textareas (supersedes twbs#39480).
Only apply extra top padding to textareas where it is needed. Also removed unnecessary floating label background for non-textareas (supersedes twbs#39480).
Only apply extra padding to textareas where it is needed. Also removed unnecessary floating label background for non-textareas (supersedes twbs#39480).
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
Checklist
npm run lint
)Live previews