Create animated Input field

the_guy · 2024-06-24T21:17:50.965+00:00

I try to build the following input field within toddle:https://www.youtube.com/watch?v=Tdzas-IlKSMI know about the "style" element where I can insert inline css, that works for normal divs with a class like .labelline{}But I cant get input{} styled.adding a class .input to it also did not work as I thought it would.Is there a way how to replicate the functionality in the video within toddle?

the_guy
1 year ago
I try to build the following input field within toddle:
https://www.youtube.com/watch?v=Tdzas-IlKSM

I know about the "style" element where I can insert inline css, that works for normal divs with a class like .labelline{}
But I cant get input{} styled.
adding a class .input to it also did not work as I thought it would.

Is there a way how to replicate the functionality in the video within toddle?
🔥1
Lucas G
1 year ago
https://editor.nordcraft.com/projects/shared_components/branches/start/components/test?leftpanel=design&canvas-width=800&canvas-height=800&rightpanel=style&mode=design
🔥1
Pretty cool input
AY EYE
1 year ago
That is really cool @Lucas G
Lucas G
1 year ago
Not my design but I do kinda like it. I might clean it up to use it
And make it accessible
AY EYE
1 year ago
@Lucas G trying to do this on a text area instead of an input but its not working, any insight as hy it wouldnlt?
Lucas G
1 year ago
It should work anywhere. Likely just have to adjust the either the values or make sure the correct things are absolutely positioned

Create animated Input field

the_guy

Lucas G

AY EYE

Lucas G

AY EYE

Lucas G