The ::placeholder pseudo-element styles the hint text shown inside an <input> or <textarea> before the user types.
It does not style the typed value. Only a limited set of text-like properties apply (similar to ::first-line): mainly color, font, opacity, and text decoration.
Supported across modern browsers. Prefer the standard ::placeholder form.
Placeholders disappear on input and must not replace a visible, associated <label>.
Skip ::-webkit-input-placeholder, ::-moz-placeholder, and :-ms-input-placeholder unless you must support very old browsers.
::placeholder { /* styles */ }Commonly scoped: input::placeholder or textarea::placeholder.
| Pattern | Description | Try it |
|---|---|---|
::placeholder | Style placeholder text on matching controls | Try it |
input::placeholder | Inputs only | Try it |
| color + opacity | Readable muted hint color | Try it |
| italic hint | font-style on the hint | Try it |
| input vs textarea | Different styles per control type | Try it |
currentColor | Match the control’s text color | Try it |
::placeholderAdd a placeholder attribute, keep a real label, then style the hint.
<label> with the control.placeholder hint in HTML.input::placeholder { … } with text properties only.| Piece | Required? | Role |
|---|---|---|
placeholder attribute | Yes | Provides the hint text to style |
<label> | Yes (a11y) | Names the field; not replaced by placeholder |
| Text properties | Yes | color, font, opacity, text-decoration |
:placeholder-shown | Optional | Styles the control while the hint is visible |
Pick a hint color. The empty field uses ::placeholder; typing replaces the hint with normal input text.
Each snippet focuses on ::placeholder. Use Try It Yourself for a live editor.
Set a clear, muted color for placeholder text.
input::placeholder {
color: #64748b;
opacity: 1;
}::placeholder. Only the hint is targeted.color. Choose a muted but readable shade.opacity: 1. Keeps color consistent across browsers that fade placeholders by default.Use font style to make hints look different from typed text.
input::placeholder {
font-style: italic;
color: #64748b;
}font-style applies to the hint only.Scope styles when single-line and multi-line hints should look different.
input::placeholder {
color: #2563eb;
}
textarea::placeholder {
color: #64748b;
font-style: italic;
}input::placeholder and textarea::placeholder stay separate.Most issues are about accessibility, not syntax.
Screen readers and sighted users need a lasting label. Put examples outside the field with aria-describedby when needed.
Too light fails WCAG; too strong looks like real input. Aim for readable gray that still differs from typed text.
Only a ::first-line-like subset applies. Do not expect background or border on the placeholder itself.
:placeholder-shown::placeholder styles the hint. :placeholder-shown matches the control while that hint is visible.
Set color explicitly and often opacity: 1 so Firefox, Chrome, and Safari look alike.
::placeholder is a browser CSS pseudo-element. Node.js, Deno, and Bun do not evaluate it.
Standard form widely supported since ~2020. Older engines needed vendor prefixes.
Bottom line: Safe for modern forms. Prefer unprefixed ::placeholder. Not a server runtime API.
color (and often opacity: 1) for cross-browser consistency.One line: ::placeholder styles the hint text inside empty form fields — never the typed value.
Style form controls that the user cannot edit.
8 people found this page helpful