Search code examples
csstwitter-bootstrapbootstrap-5

How can I style the backgrounds of Bootstrap's new form-floating input labels?

I am using Bootstrap 5.3, and trying to use the new "floating labels". I would like my inputs to have additional styling, such as background colors. When I add a subtle green background color at first, it looks fine when there is no value set, but as soon as you focus in or add text, you get this:

enter image description here

If I add a background color to the label, it doesn't style the white part there, it styles some region surrounding it:

enter image description here

Does this have something to do with :before/:after? Will someone please shed some light on this black magic? I am using Brave, and it needs to work in 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>

Solution

  • You may simply remove the background when the label is in focus

    .form-floating > label::after {
    background-color: transparent !important;
}