CSS: in an input field with a grayed out placeholder text, how can I shift its placeholder above what I manually type instead of replacing it?

Answer 1

You are probably referring to the style popularized with material design (demo: https://material-components.github.io/material-components-web-catalog/#/component/text-field?type=filled)?

Such effects are not achieved by "moving the placeholder", but rather by positioning the label accordingly.

However, you could simplify the effect by using a regular placeholder and then only show the label when the input is active and/or filled.