时间戳

首页 > 解决方案 > 从引导程序 5 更改浮动标签的颜色

css - 从引导程序 5 更改浮动标签的颜色

问题描述

我正在使用 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>

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

标签： cssbootstrap-5

解决方案

当它将焦点放在您的输入元素上时，在焦点时使用 + 选择器选择它旁边的标签并为其赋予任何颜色。在此处阅读有关选择器的信息。

如果您需要其他内容，请随时发表评论

.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>

推荐阅读