I’ve seen this floating label effect around the internet and it looked really cool. A lot of the solutions I found, required javascript, however with the new CSS selectors that have been added recently, we can create a full CSS only solution.
This solution uses the form’s label field to ensure accesibility. The placeholder text will be hidden.
Demo
Code Snippet
Add the code below to your css stylesheet.
You may have to modify some of the values to get it working 100% with your theme. However this should get you most of the functionality out of the box.