Fancy placeholder - Post ID 292377

User 2906089 Photo


Registered User
222 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:
Learn something, Share something.
User 187934 Photo


Senior Advisor
20,181 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
20,181 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
14,447 posts
Online Now

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

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2906089 Photo


Registered User
222 posts

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

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.