Webflow Floating Text Input Label

Hello Community,
Hello community,

I thought I’d use this rainy Sunday to design a new contact form. For this I wanted to use material design floating label textinputs. Unfortunately I didn’t manage to change the color of the label while making an input (So the current blue color). Does anyone know where this color comes from or how the floating label animation works in general?

Thanks for your help and have a great day.

Here the link to the staging because the read only doesnt work Kontaktformular

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

That style comes from the embed JS on the page. In there there’s a section that adds or removes the class when-filled that affects that colour:

Just add that class to any label in your form, style it as you want and you should be good to go.

thank you very much. Your answer has absolutely solved my problem. I just had to select and style the combo classes that were already created. Actually so simple, but without your help I would probably try and test again for a whole day. Thanks for the extra lifetime:-). Have a nice day.

Best regards

1 Like

For anyone else implementing inputs like this - you can easily clone them for free using this project I released recently!