Floating label with Pro Forms

How To
1

Hey everyone :slight_smile:

I found a website (https://natyvelos.com/) that seems to use Pro Forms. I´d love to know how you can create this floating label effect with Bricksforge.

I´ve already tried multiple times but for whatever reason it never works, no matter how I approach it… I don´t know if JavaScript is definitely required or if this can be done with just CSS. Also, I´m not sure about the best way to select the active field. I´ve seen versions using focus-within and others where a class was assigned but I have no clue how to do that…

Has anyone ever done this before? If so, could you share a screenshot of your setup in the builder and maybe the CSS (or even JS if necessary)? That would help me a lot!

Thanks in advance!

1 Like
2

Position your label absolute and then change it

input {
  &:focus, &:not(:placeholder-shown), &:autofill {
    & + label { 
     /* Your styles here */
    }
  }
}
1 Like