How to create a dynamic placeholder for a login page?

The current GMail Login Page has an "Email or phone" placeholder text that reduces in size and moves towards the top-left corner of the field on focus. How to achieve something similar using CSS and/or JS?