Avoid Placeholder Text by Animating Form Labels

Last updated 2 years ago by Christopher Schmitt


Placeholder text in forms might be thought of as a user experience add-on, but its real-world use is problematic. While there are several issues with placeholder text, a few points to note are:

The text might not be translated by auto-conversion tools such as Google Translate. The default color of placeholder text might be too low in contrast for legibility. The text disappears when users start typing, and then people can forget the input’s purpose, especially if the label is visually hidden. There are options to give forms a sense of style without relying on placeholder text.

We suggest one solution — you can see the code on our CodePen — that includes positioning the label element so that it overlaps the input field. In effect, making the label look like placeholder text. Then when the input receives focus, animate the label element out of the user’s way. Let’s dive into one approach using CSS positioning and transitions:

Read full Article