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?
first of all, welcome to StackOverflow!
It's called "floating labels", and it can be achieved by using CSS alone (which can turn out to be a little hard if you are not really familiar with pseudo-selectors like :focus and :empty) or by using a little of JS, which may be a little easier.
You can take a look at some examples here: https://css-tricks.com/float-labels-css/