CODEWITHSUNDEEP
javascripthtmlcssreactjsprimereact
Stefano Romito
Stefano Romito

Reputation: 1

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

Upvotes: 0

Views: 76

Answers (1)

Alvaro Montoro
Alvaro Montoro

Reputation: 29695

Looking at the PrimeReact's FloatLabel documentation, there isn't a class p-float-label-active added to the label when the input is active.

What you can do is add your own color style when the input is active or focus like this:

.p-float-label :is(:active, :focus) + label {
  color: black;
}

This solution uses the next-sibling combinator and the :is() pseudo-class. The class .p-float-label is added to the FloatLabel container by the component, if it contains an element active or focused (:is(:active, :focus)) then the next sibling label (+ label) will have a black color.

Applied to the code on the question:

.custom-float-label .p-float-label :is(:active, :focus) + label {
  color: black;
}

Upvotes: 0

Related Questions