Before any user interaction with a form field, the placeholder should be visible and the label should be hidden
The placeholder should be of sufficient color contrast.
Hover state
If a user hovers over the form field, the placeholder and form field should change in appearance to indicate that the form field is interactive.
Ideally, the form field could change in hover state so that the border appears on all sides of the element - to help make it more discoverable.
Focus state
If a user focuses on the form field (via mouse click or by tabbing to the element):
The placeholder should gradually fade to invisible.
The label should animate into view above the form field.
The border that appeared when the element was in hover state should remain visible when in focus state.
Additionally, the form field's bottom border should change in color - to help indicate that is is now in "edit mode".
De-focus state
When focus leaves the form field:
The label should remain in view but change color to indicate that it is no longer in “edit mode” and has been completed.
The form field’s border-bottom color should return to the original border-bottom color.
Potential issues
The label, when present, is much smaller than normal text and could be hard to read for some users
Depending on how and where this solution is used, the lack of visual definition for inputs could present usability issues for some users
The labels associated with inputs appear after the input in source order. However, as the input and label are explicitly associated via "id" and "for" values, this should be acceptable for most assistive technologuies.
In order to have the label remain visible after the user has left th form field, this solution requires relevant inputs to use the "required" attribute. The :valid CSS selector is then used to make the label visible. This selector is only supported by recent browsers.