如何为Bootstrap 5.3的form-floating输入标签设置背景样式？

问题原因 #

Bootstrap 5.3的浮动标签（form-floating）是通过CSS状态选择器（如:focus、:not(:placeholder-shown)）控制<label>的位置偏移实现的。当你给<input>设置自定义背景色后，输入框聚焦或有内容时，<label>会上移到输入框顶部区域，但默认<label>是透明背景，此时输入框的背景色会透过标签与输入框重叠的部分显现，造成视觉异常。

你猜测的伪元素并不是问题核心——Bootstrap的浮动标签没有依赖:before/:after伪元素。默认情况下，<label>是绝对定位且背景透明，所谓的“白色区域”其实是继承了父容器或页面的背景色。直接给<label>加背景色会给整个标签元素上色，而非仅覆盖它与输入框重叠的部分，所以会出现“周围区域上色”的情况。

修复方案 #

要解决这个问题，只需让<label>的背景色与输入框一致，并调整内边距，确保它完全覆盖输入框顶部的边框和背景区域：

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="w-25 p-3">
    <div class="form-floating">
        <input class="form-control" type="text" placeholder=" " id="myElement" style="background-color: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); border-color: var(--bs-success-border-subtle);">
        <label class="form-label" for="myElement" style="color: var(--bs-success-text-emphasis); background-color: var(--bs-success-bg-subtle); padding: 0 0.5rem;">Name</label>
    </div>
</div>

说明 #

• 给<label>设置与<input>相同的background-color，避免上浮后露出输入框背景
• 添加padding: 0 0.5rem，让标签背景覆盖住与输入框边框重叠的区域，防止边框线条穿过文字
• 该方案在Brave浏览器（基于Chromium）中完全兼容生效

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