How to style the Prime-React’s component “FloatLabel”?

In the LoginPage of my website, the input fields use the FloatLabel component:
initial state image.

When the label floats on top, it blends with the background:
final state image.

I’m trying to change it’s color only when it floats up.
Is there any way to do it?

I’m using the latest version of React and Prime React; here’s where I use the component:

<FloatLabel>
    <InputText
         id="username"
         type="text"
         value={username}
         onChange={(e) => setUsername(e.target.value)}
     />
     <label htmlFor="username">Username</label>
</FloatLabel>

I tried adding these properties in the css file:

.custom-float-label .p-float-label label {
  transition: color 0.3s;
}

.custom-float-label .p-float-label label.p-float-label-active {
  color: black;
}

but nothing happens