Use ::placeholder to style the hint inside an empty input. It does not style the value someone types, and the hint disappears once they enter text. Keep a visible label so the field still has a name after that happens.

Working example

Compare a hint with an entered valueLink

HTML and CSS

HTML

<label for="email">Email address</label>
<input id="email" type="email" placeholder="name@example.com" />

CSS

input {
  font: inherit;
  padding: 0.6rem;
  border: 1px solid #64748b;
}
input::placeholder {
  color: #526078;
  opacity: 1;
}
label {
  display: block;
  margin-bottom: 0.4rem;
}

Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.

Type into the field: the hint uses the pseudo-element color, while the entered value uses the input’s normal text color. Clearing the value restores the hint. Setting opacity: 1 avoids an additional browser-applied fade.

Keep the hint useful

Placeholder text needs enough contrast against the background. Do not use it for instructions that people must consult while typing. Put those in ordinary text and associate them with aria-describedby. The pseudo-element accepts a limited set of text-related properties; use the input itself for padding, borders and sizing.

Sources

Reference 1 Reference 2 provide the technical details and current compatibility information.