This is really handy snippet that can help your UX, it offers 4 different styles for the placeholder text for your text field. When you start typing the placeholder is moved out of the way but is still in view so it’s helpful for users. The positions available are as follows:
- below the text field on the left
- above the text field on the right
- below entered text within the text field on the left
- above the entered text within the text field on the left
If you are having trouble with the pen, try the archived copy on GitHub
Placeholder Styles Snippet
See the Pen Form inputs with helper text by Darin (@dsenneff) on CodePen.default