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

wwtsj6pe 于 9个月前发布在 Bootstrap

关注(0)|答案(2)|浏览(150)

我正在使用Bootstrap 5.3，并尝试使用新的“浮动标签”。我希望我的输入具有额外的样式，例如背景颜色。当我一开始添加一个微妙的绿色背景颜色时，它在没有设置值时看起来很好，但是一旦你聚焦或添加文本，你就会得到这个：
x1c 0d1x的数据
如果我给标签添加一个背景色，它不会设置白色部分的样式，而是设置它周围的一些区域的样式：

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>

字符串

twitter-bootstrap

来源：https://stackoverflow.com/questions/77646899/how-can-i-style-the-backgrounds-of-bootstraps-new-form-floating-input-labels

2条答案

按热度按时间

6ljaweal1#

背景与输入的颜色相同。因此需要在输入获得:focus后重置。
如果你想保持较小的标签为红色;当input:focus时，在label:after上添加另一个背景。
问题是，如果有一些内容，你不想在label上做后台。目前你可以使用placeholder-show属性，它在Can I Use?上得到了很好的支持。

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

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

个字符
x1c 0d1x的数据

赞(0）回复(0）举报 8个月前

i2byvkas2#

多亏了CBroe和0stone0，我才能在检查器中找到引导CSS选择器：

的数据
然后，我可以右键单击该选择器，并添加自己的类名来控制整个站点中任何浮动标签输入的颜色

.form-floating.float_success > .form-control-plaintext ~ label::after,
.form-floating.float_success > .form-control:focus ~ label::after,
.form-floating.float_success > .form-control:not(:placeholder-shown) ~ label::after,
.form-floating.float_success > .form-select ~ label::after {
    background: var(--bs-success-bg-subtle);
    color: var(--bs-success-text-emphasis);
}

个字符

赞(0）回复(0）举报 8个月前

我来回答

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

2条答案

相关问题

热门标签

最新问答