Fancy placeholder - Post ID 292377

User 2906089 Photo


Registered User
189 posts

I've been seeing an effect that I like. On a text input a placeholder text changes it's size and the placeholder text slides to the top Left corner of the input field and the user can enter the text with the original placeholder text as a reminder what they are asking for. I think this can be done in FD but I've never done any of this type of work yet.

The other example I have seen is that the placeholder text is moved outside of the text input still with a sliding and font size change either onfocus or onclick events.

I'm looking for some advice if this a plausible using FD. I've included the two image states for clarity.

Attachments:
User 187934 Photo


Senior Advisor
19,262 posts

Those are done with a span that holds the place holder text. The position of the span is then altered.
Not sure about FD capability since you may need some custom css so it may need to be done after export. We don't have access to the head of the page.:|
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 187934 Photo


Senior Advisor
19,262 posts

Here's an example.
https://jsfiddle.net/273ntk5s/2/
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 122279 Photo


Senior Advisor
13,332 posts

And here is an example, made in a html element with the code from that fiddle Eric posted. I had to change some of values, a bit of a puzzle, but it works.
Attachments:
Ha en riktig god dag!
Inger, Norway
This site was made before we were able to create components through the app:
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/
My work in progress right now:
Components for the same as above + HTML Editor: https://mock-up.coffeecup.com


User 2906089 Photo


Registered User
189 posts

That's the right idea. I'll go play with it and see how it looks on other machines.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.