1. ::placeholder CSS pseudo-element

    The ::placeholder pseudo-element represents placeholder text in an input field: text that represents the input and provides a hint to the user on how to fill out the form. For example, a date-input field might have the placeholder text `YYYY-MM-DD` to clarify that numeric dates are to be entered in year-month-day order.

  2. :placeholder-shown CSS pseudo-class

    Input elements can sometimes show placeholder text as a hint to the user on what to type in. See, for example, the placeholder attribute in HTML5. The :placeholder-shown pseudo-class matches an input element that is showing such placeholder text.

  3. css selector: `::placeholder`

  4. css selector: `:placeholder-shown`: support on non-`type="text"` elements (such as `type="number"` or `type="time"`)