如何设置 Bootstrap 新表单浮动输入标签的背景样式？

Question

我正在使用 Bootstrap 5.3，并尝试使用新的“浮动标签”。我希望我的输入具有额外的样式，例如背景颜色。当我一开始添加微妙的绿色背景色时，在没有设置值的情况下看起来很好，但是一旦您聚焦或添加文本，您就会得到以下结果：

如果我向标签添加背景颜色，它不会设置白色部分的样式，而是设置其周围某些区域的样式：

这与 :before/:after 有关系吗？有人可以解释一下这个黑魔法吗？我正在使用 Brave，它需要在 Brave 中工作。

<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: red;">Name</label>
    </div>
</div>

Answer 1

背景的颜色与输入的颜色相同。所以输入得到他的后需要重置:focus。

如果你想让较小的标签保持红色；添加另一个label:after背景input:focus。

问题是您不想了解label某些内容的背景。目前您可以使用该placeholder-show属性，该属性得到了很好的支持，如我可以使用吗？。

.form-floating > input:not(:focus):placeholder-shown + label {
     background: red;
}

.form-floating > input + label:after {
    background: red !important;
}

<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);">Name</label>
    </div>
</div>