• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Switch between labels and placeholder text on form inputs


Paul Murray

Moderator
Staff member
#1
I really like the way flaticon.com do their forms, so I've put together a little snippet that demonstrates (roughly) how to style a form label as though it's placeholder text, then move it out of the way when the input is selected. A little jQuery checks to see if the input has content and if so, it keeps the label out of the way.

https://jsfiddle.net/PaulMurray/3jkmhzfn/

Example:

switchable-form.jpg