Bootstrap 5中datalist输入框的浮动标签显示异常问题

Bootstrap 5 的 form-floating 组件对标签浮动的逻辑依赖特定的 HTML 结构和输入框状态，针对你遇到的 datalist 浮动标签异常问题，可以通过以下步骤修复：

一、调整 HTML 结构顺序 #

form-floating 要求输入框（input）必须放在标签（label）之前，这是因为组件通过 :placeholder-shown 伪类控制标签的位置，颠倒顺序会导致 CSS 逻辑失效。

修改后的代码：

<div class="form-floating">
    <input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Type to search...">
    <datalist id="datalistOptions">
        <option value="San Francisco">
        <option value="New York">
        <option value="Seattle">
        <option value="Los Angeles">
        <option value="Chicago">
    </datalist>
    <label for="exampleDataList" class="form-label">Datalist example</label>
</div>

二、确保 placeholder 属性有效 #

浮动标签的显示逻辑完全依赖输入框的 placeholder：当输入框为空且 placeholder 可见时，标签会覆盖在输入框上方；当输入框有内容（或聚焦）时，标签会浮动到输入框顶部。如果 placeholder 缺失或被浏览器隐藏，标签的浮动行为会异常。

三、针对特殊情况的自定义样式（可选） #

部分浏览器中，选择 datalist 选项后，输入框的 :placeholder-shown 状态可能不会立即触发更新，导致标签位置错误。可以添加以下自定义 CSS 强制标签在输入框有值时保持浮动状态：

.form-floating input:not(:placeholder-shown) ~ label {
    transform: translateY(-1.5rem) scale(0.85);
}

效果说明 #

调整结构后，输入框聚焦、输入内容或选择 datalist 选项时，标签都会正常浮动到输入框顶部；输入框为空时，标签会回到输入框上方的初始位置，和标准浮动表单行为一致。

内容的提问来源于stack exchange，提问作者CLE