I'm currently using Bootstrap 5.3 and experimenting with the new "floating labels" feature. I want to add some extra styling to my input fields, like background colors. However, when I initially set a subtle green background color, it looks fine without any text entered. But as soon as you focus on the field or enter text, it ends up looking like this:
https://i.sstatic.net/Gip4L.png
If I try adding a background color to the label, it doesn't style the white part of the label itself but instead affects the area surrounding it:
https://i.sstatic.net/fbEzz.png
Could this be related to :before/:after pseudo-elements? Can someone please explain this mysterious behavior? Also, I'm using Brave browser, so it's important that the solution works in Brave.
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2d4f4242595e595f4c5d6d18031e031f">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ccaea3a3b8bfb8beadbc8cf9e2ffe2fe">[email protected]</a>/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>