Codectionary / Developer documentation / CSS

Styling Input Placeholders

::placeholder styles the placeholder text shown by supported empty form controls.

What it is and why to use it

::placeholder styles the placeholder text shown by supported empty form controls. It is useful for making an example input format legible. A placeholder is a temporary hint, however, and must not replace a persistent label that identifies the control after the user starts typing.

Common mistakes and limitations

Do not use faint placeholders as the only instructions or labels. Not every property applies to this pseudo-element, and browser defaults can include opacity changes. Test contrast in the actual control state and theme.

Try the example

The example pairs editable CSS with its own HTML preview. Run it, then change one declaration at a time and compare the result. Locally, put the CSS in a style element in the document head or in an external stylesheet linked from the HTML. Feature support varies by browser and version; use the linked reference and a useful fallback where needed.

HTML used by this example

<label for="name">Your name</label><input class="field" id="name" placeholder="For example, John">

Syntax

input::placeholder { color: #475569; opacity: 1; }

Examples

Styling Input Placeholders

Run the CSS against the supplied HTML, then experiment with the values.

.field { display: block; padding: .75rem; margin-block-start: .5rem; border: 1px solid #64748b; background: white; color: #0f172a; }
.field::placeholder { color: #475569; opacity: 1; }
  1. The label remains visible whether the input is empty or filled.
  2. The pseudo-element changes only the placeholder text’s presentation.
  3. Typing removes the hint while the actual input text uses the control’s normal foreground. This is useful for examples of expected input format.
HTML used by this example
<div class="demo"><label for="name">Your name</label><input class="field" id="name" placeholder="For example, John"></div>

Best practices

  • Do not use faint placeholders as the only instructions or labels. Not every property applies to this pseudo-element, and browser defaults can include opacity changes. Test contrast in the actual control state and theme.
  • Inspect the relevant browser reference and test the browsers used by your audience.

Runtime & versions

Web browsers. Feature availability depends on the language and runtime version used by your project; consult the official reference below.

CSS specifications (modules)

Specifications & further reading