Print Reseller Scheme
  1. 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

Discussion in 'Website Design Forum:' started by Paul Murray, Jul 10, 2015.

  1. Paul Murray

    Paul Murray Moderator Staff Member

    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
     
  2. bigdave

    bigdave Moderator Staff Member

    Very nice!
     

Share This Page