Floating Labels for File Input

[lionfood]

Prerequisites

• I have searched for duplicate or closed feature requests
• I have read the contributing guidelines

Proposal

It would be a nice feature to have floating labels also for file inputs. At the moment, the label is placed over the button of the input field and overlaps parts of the button.

Motivation and context

With having floating labels also for file inputs, (nearly) all input fields of a web form could be labeled with this, which enables a consistent layout.

[thedanbob]

I got it looking pretty decent with the following SCSS:

.form-floating > input[type="file"].form-control {
  padding-top: 2.25rem;
  height: calc(3.875rem + calc(var(--bs-border-width) * 3));

  &::file-selector-button {
    border-top: var(--bs-border-width) solid var(--bs-border-color);
    border-right: var(--bs-border-width) solid var(--bs-border-color);
    border-top-right-radius: var(--bs-border-radius); // optional
  }
}