Form-floating form-control doesn't display placeholder

[williamjohngardner]

Prerequisites

• [X] I have searched for duplicate or closed issues
• [X] I have validated any HTML to avoid common problems
• [X] I have read the contributing guidelines

Describe the issue

When I add the form-control class to an input element inside of a form-floating class, the placeholder value is not displayed. This is a breaking change for me from Bootstrap v4. When I change the form-control class to form-select, the placeholder is displayed. I've used this as a workaround, but from a UI standpoint, it's not the best to have a dropdown arrow displayed on a non-dropdown element.

Reduced test cases

https://jsbin.com/jijopihebe/edit?html,output

What operating system(s) are you seeing the problem on?

Linux

What browser(s) are you seeing the problem on?

Chrome, Firefox

What version of Bootstrap are you using?

v 5.1.3

[mdo]

Select menus don't have placeholders, they show their first option. You're using a .form-select class on an input, which is incorrect. This also isn't a breaking change since the v4 version was just an example and not an officially supported component.

The docs mention how we use the placeholder to move the label. As of right now, we don't currently have an always showing placeholder option. I believe there's been a request for that in the past though I'm unsure of how feasible it is.

[williamjohngardner]

I realize that I was using the select class incorrectly, I was trying to illustrate the functionality that I was looking for. Is there a ticket that I can follow for this functionality request? It would really help my project.

[clamchoda]

For some reason bootstrap makes the color transparent. You can change it on focus to show the placeholder.

.form-control:focus::placeholder{color:black !important;}

[superfaz]

Here is an idea to display the placeholder value when the control is focused and avoiding to use !important:

.form-floating > .form-control:focus::placeholder,
.form-floating > .form-control-plaintext:focus::placeholder {
    color: var(--bs-secondary-color);
    opacity: 0.5;
  }
}```