Skip to content
AITroveRead. Build. Understand.
Reading list
Make this comfortable

CSS ::placeholder: keep example text readable and disposable

Last updated: 5 Oct 20265 min read
tutorial
BeginnerBy AITrove Editorial

The ::placeholder pseudo-element styles placeholder text inside an input or textarea. It is different from :placeholder-shown, which matches the control while that text is displayed. Placeholder text disappears as the user enters a value, so it cannot carry the only label or a required instruction.

When to use it

A case lookup field has a permanent visible label and a nearby format hint. Its placeholder offers one short sample code, shown in a color that remains legible on the field background and distinguishable from entered text. Set an explicit opacity because browser defaults vary. Test empty, focused, typed, autofilled, and error states; also test dark mode, forced colors, and high zoom. The example must not look like a saved value. Use real hint text outside the control for rules such as allowed characters or where to find the code, and associate that hint in HTML. Do not use placeholder text as a substitute for a label: once input begins, the user should still know the field's purpose. If a screen reader repeats the placeholder, the instruction should remain understandable without relying on its color or timing. A styling selector does not validate the sample format or parse submitted text.

css
.case-lookup input { background: #fff; color: #173441; border: 1px solid #58707d; }
.case-lookup input::placeholder { color: #506572; opacity: 1; }
.case-lookup input:focus-visible { outline: 3px solid #1c5e87; outline-offset: 2px; }

Cost and verification

The paint cost is negligible. The design cost is contrast testing on the real input background and ensuring placeholder text is not mistaken for an existing value. A translucent default placeholder can fall below a readable contrast threshold even when the authored color looks strong in a code review. Do not solve that by making it identical to entered text without another clear distinction. Check system forced-color handling and keep label and hint text in the DOM. Placeholder content may be truncated on narrow fields, which is another reason to keep essential guidance outside. Server-side format checks and useful error messages remain separate from this presentation rule.

Common Mistakes

  • Do not use ::placeholder as the field label.
  • Do not assume a default browser opacity is readable.
  • Do not put the only format instruction inside vanishing text.

Connected lessons

css
reference
web
Storage details