user profile image

CSS only input focus animation/effect based on Polymer Paper Elements' Input pattern (

When you click into a field the label slides up and highlights while a colorful border grows across the bottom of the field. If text is entered the label stays above the field.


  1. This is really cool (I'm totally going to steal that :D) - If you enter a wrong mail in the mail-field, the label will not stay above the field (with no error message).

  2. Really nice. Always enjoyed when UI and UX work nicely together.

    One question - why is the span necessary? You could simply add a bottom border to the input and textarea - make it transparent by default and add the color on :focus.

    This is really nitpicking, but I'm a believer in completely semantic code; html is for structure, CSS is for presentation; they shouldn't ever overlap when it's possible to use them correctly and achieve the same results.

  3. Its just needed to make the border grow, you could do without and have the border fade in. However, that reminds me that when I cleaned it up, I reworked it to use no pseudo elements; so it could be altered to use a :before or :after. Going to have to try that tonight. Thanks for the jog to the brain.

  4. Hey Steven! Thanks for the resource! Just wondering why the required field is needed for this to work? Is there a way this can work for me without adding 'required'? Thanks in advance man!

  5. @traf the required's let it use only CSS and native validation as the styling relies on :valid to apply the animations. You could us JS to add a class and use the class name to apply the animation though.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.