更改浮动标签的颜色 bootstrap 5

Question

我正在使用 bootstrap 5 创建一个带有浮动输入的表单。这是我使用的输入：

<div class="form-floating mx-auto mb-3 w-25">
    <input type="text" class="form-control" id="username_field" placeholder=" " />
    <label for="username_field" class="form-label">Username</label>
</div>

此代码生成如下所示的浮动输入： floating input 我想在选择输入时更改标签的颜色（如果可能，仅使用 css）。

Answer 1

当它将聚焦在您的输入元素上时，在聚焦时使用 + select 或 select 它旁边的标签，并为它提供您想要的任何颜色。阅读 here 关于 select 的内容。

如有其他需要，欢迎留言

.form-control:focus + .form-label {
  color: red;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<div class="form-floating mx-auto mb-3 mt-3 w-75">
    <input type="text" class="form-control" id="username_field" placeholder=" " />
    <label for="username_field" class="form-label">Username</label>
</div>

Answer 2

您可以尝试类似以下的操作来影响所有输入，或者修改以下内容以使用 id's/classes 如果您只希望它专门用于此输入：

input:focus + label {
  color: orange;
}

更改浮动标签的颜色 bootstrap 5

Change the color of a floating label from bootstrap 5

css

bootstrap-5