-- SOLVED-- Help needed with floating label (survey form)

Hy there,

I am revisiting my survey form, taking out the errors and cleaning up the HTML/CSS. While doing so I felt like changing the design a bit.
A problem I’m running into is with making the labels of my form float upwards upon selection (and keep them floated while there is written content). I did this trick successfully on other projects twice but it does not seem to work on my older survey form. I have tried out several CSS adaptations for floating that I found on internet, none seem to work.

I marked the area within the form section where I applied the relevant CSS
To start off I worked with a single input box that I gave the class=“first-name” .
While looking for errors I pushed and pulled all kinds of tags and attributes, the present CSS floating attempt is a bit trimmed down. Please see the CodePen:

Any help is much appreciated.

–SOLVED–

In case anyone bothers:
The mistake I made was not putting the < label > AFTER the < input >.

1 Like

I was just gonna say… you got this! lol

Haha yea. It took me a while and it was frying my mind. But I learned so much during this ride. I figure it is mostly when I walk up against such failures that I learn the most :slight_smile:

1 Like

if we didn’t make mistakes we wouldn’t learn nothing.

1 Like