Set floating-labels default color equal to the input placeholder color

[pine3ree]

Motivation & Context

Floating labels (after not focused inputs and not plaintext form-control) are used as input placeholders, so they should have the same styling (read $input-placeholder-color) of actual input-placeholders.

(edit)
Added (and used) new var:

$form-floating-label-color:             $input-placeholder-color !default;

to allow easier extra customization

[julien-deramond]

Thanks for this PR @pine3ree

I'm not so sure about the change of color given the fact that is first a label, so should be black. But it's also temporary a kind of placeholder too when not focused. Maybe what's strange, is not having the same color when focused and not focused.
I'll let @mdo check that from a design point of view.

However, I'd say that having a $form-floating-label-color (whatever the color chosen in the end) could be useful to override the default label color (when not focused).

[julien-deramond]

Comment can be removed. The naming of the Sass var is sufficient to understand what it does IMO.

Suggested change

	$form-floating-label-color: $input-placeholder-color !default; // When the label is acting as a placeholder
	$form-floating-label-color: $input-placeholder-color !default;

[pine3ree]

Hello @julien-deramond ,

form what I've learned (but I could have missed something) labels (after .form-control) inside a .floating-label are displayed as labels when (

bootstrap/scss/forms/_floating-labels.scss

Line 54 in 413894d

> .form-control:focus,

)

• the .form-control has focus (.form-control:focus)
• the control is a .form-select
• there is no placeholder attribute (.form-control:not(:placeholder-shown))
• the control is a .form-control-plaintext (btw, I use this for divs when displaying application entity properties)

In all the cases listed above the label is actually positioned as an inside-input label and assigned a different color and size (more appropriate for the label role), while the default behavior (

bootstrap/scss/forms/_floating-labels.scss

Line 12 in 413894d

> label {

) is to take the place of the input placeholder.

Granted, at the same time it also acts as a label, so it has to be easy to read (like a placeholder). What is kind of confusing is that the .form-floating inputs look much like already filled inputs rather than inputs with placeholders.

Thanks and kind regards!

[theodorejb]

I believe this can be closed since #39720 was merged.

[pine3ree]

I believe this can be closed since #39720 was merged.

Hello @theodorejb,
the pr #39720 set the background color, while my suggestion was to make floating-labels (when acting as input placeholders) and input-placeholders have the same color (the input-placeholder assigned color)
kind regards

[theodorejb]

the pr #39720 set the background color, while my suggestion was to make floating-labels (when acting as input placeholders) and input-placeholders have the same color

@pine3ree That PR didn't only change the background color. It also fixed the floating label color so it no longer looks like input text when acting as a placeholder. See the preview: https://deploy-preview-39720--twbs-bootstrap.netlify.app/docs/5.3/forms/floating-labels/

[pine3ree]

@theodorejb
I must have missed it, sorry... closing it!