V5: Consider adding form floating label color

[fschiettecatte]

Please consider adding a $form-floating-label-color variable to control the color of the floating label.

[mdo]

Closing as stale and a won't fix—going to keep the floating forms as close to default forms as possible, which includes inheriting their styles.

[septatrix]

I understand that one wants to keep them as close to the default as possible however this comes with some problems. As the floating label is not a descendent of the <input> element it does not inherit it's color but instead to surrounding color (usually body). If surrounding element has a dark background and consequently a light font color the label inherits this and becomes illegible. A good example of this is a dark card.

Now this can obviously be solved by explicitly declaring a color on the label element however this can become quite repetitive. A good example of this are dark themes which have to explicitly add a css selector for this case:

https://github.com/thomaspark/bootswatch/blob/d982c0baf3e425df284cbefa1a12620d6fbaf6e0/dist/darkly/_bootswatch.scss#L26-L28 https://github.com/thomaspark/bootswatch/blob/d982c0baf3e425df284cbefa1a12620d6fbaf6e0/dist/superhero/_bootswatch.scss#L72-L76

This is certainly a possibility though again comes with disadvantages (Bootstraps preliminary/WIP dark mode itself cleverly evaded this issue from the start by giving inputs a dark background). Ideally a theme should only require changing variables and nothing more. With bootstrap adopting more and more customizability I think this is a worthwhile change. A default value of currentColor (or $input-color) is also fine and does not hurt anyone.

[msegers]

@mdo I was just looking up this issue, currently (and maybe it's me, or the markup that I'm using) it's like @septatrix mentioned, the variables used to style regular labels do not apply to floating labels. I'm having to add some custom scss to apply the form label styles, right now in my project without it, it's using body text colour and font weight for example.

I'll share my markup in case it's relevant and anyone wants to look into it, because possibly that's what's wrong :-).

<div class="input-group has-validation">
  <div class="form-floating">
    <input id="df1c73b7-9a45-47d9-9a44-fcd357413122" placeholder="Name" name="_firstFormExampleModel.Name" class="form-control">
    <label for="df1c73b7-9a45-47d9-9a44-fcd357413122">Name</label>
  </div>
  <div class="invalid-feedback px-3"></div>
</div>

I did trim some html comments and guid attributes as we're using blazor.