CSS placeholder-shown: style empty state without replacing a label

When to use it

A payment-reference input can have a format hint such as an example code, but the visible label must remain outside the control so it does not vanish after entry. Use placeholder-shown to soften an optional helper border before the user types, while keeping the focus outline and error treatment independent. The sample does not move the label or use placeholder text as the only instruction. Test browser autofill, pasted values, whitespace-only input, and an empty required field after failed submission. A placeholder disappears when a value is entered; it is poor storage for a format rule users may need while editing. If validation fails, show a specific visible error and connect it to the control in HTML.

.payment-reference { border: 2px solid #41637c; }
.payment-reference:placeholder-shown { border-color: #8fa7b8; }
.payment-reference:focus-visible { outline: 3px solid #175b44; outline-offset: 2px; }

Cost and verification

Matching this state is cheap. The failure cost is a form that appears labeled only until the first keystroke. Placeholder text can also have lower contrast and may not be announced consistently as instructions. Keep a persistent label, visible help where needed, and a real error message. Do not infer that an empty-looking field has no value merely from its border color; autofill and programmatic values can change the state. Verify both browser-managed and application-managed form updates with actual interaction tests.

Common Mistakes

• Do not use placeholder text as the only label.
• Do not treat placeholder-shown as a validation result.
• Do not hide formatting instructions once the user starts typing.

Connected lessons

• CSS Property Decisions
• CSS form states: make errors and disabled fields explicit
• CSS pseudo-classes: style interaction states without hiding them
• HTML form help: connect visible instructions and errors to a control

Further native-state decisions

• CSS ::placeholder: keep example text readable and disposable