CSS ::placeholder Selector

What You’ll Learn

The ::placeholder pseudo-element styles the light hint text inside <input> and <textarea> fields. It helps you match placeholder text to your form design without affecting what users actually type.

Introduction

The CSS ::placeholder selector targets the placeholder text inside form fields. Placeholder text is the light gray hint shown before a user types, set with the HTML placeholder attribute.

It works on <input> and <textarea> elements, letting you customize color, font size, font style, opacity, and other text properties for a more polished form appearance.

Definition and Usage

Use ::placeholder on its own or scoped to a field: input::placeholder or textarea::placeholder. Styles apply only to the hint text — not to the value the user enters.

📝 Syntax

The syntax for the ::placeholder pseudo-element is:

::placeholder {
  /* CSS properties */
}

The ::placeholder pseudo-element targets the hint text of form elements that have a placeholder attribute.

Basic Example

::placeholder {
  color: #94a3b8;
  font-style: italic;
  font-size: 0.875rem;
  opacity: 1;
}

Allowed Properties

Legacy Vendor Prefixes

Modern browsers support the standard ::placeholder syntax. For very old browsers, you may still see these prefixed versions:

/* Legacy prefixes (optional for old browsers) */
::-webkit-input-placeholder { color: #94a3b8; }
::-moz-placeholder { color: #94a3b8; opacity: 1; }
:-ms-input-placeholder { color: #94a3b8; }

Syntax Rules

• The element must have a placeholder attribute in HTML.
• Use double colon ::placeholder — it is a pseudo-element, not a pseudo-class.
• Scope with element selectors: input::placeholder avoids affecting unrelated elements.
• Combine with :focus: input:focus::placeholder for fade effects.
• Set opacity: 1 on Firefox when using ::-moz-placeholder.

Related Selectors

• :focus — style the field when the user clicks into it
• :disabled — style inactive form controls
• [placeholder] — attribute selector to target fields with placeholders
• ::selection — style text the user highlights
• input — styles the actual typed value, not the placeholder

When to Use ::placeholder

::placeholder is ideal for polishing form hint text:

• Login and signup forms — Match placeholder color to your brand palette.
• Search bars — Use lighter, italic hints like “Search products…”
• Contact forms — Style textarea placeholders differently from single-line inputs.
• Focus interactions — Fade placeholders when the user starts typing.
• Consistent typography — Align hint font size with your design system.

Examples Gallery

Practice ::placeholder with basic styling, scoped selectors, focus fades, and complete form layouts.

<style>
  ::placeholder {
    color: #94a3b8;
    font-style: italic;
    font-size: 0.875rem;
  }
  input, textarea {
    padding: 0.5rem 0.75rem;
    border: 2px solid #cbd5e1;
    border-radius: 0.4rem;
    width: 100%;
  }
</style>

<form>
  <input type="text" placeholder="Enter your name">
  <textarea placeholder="Your message"></textarea>
</form>

input::placeholder {
  color: #64748b;
  font-weight: 500;
}

textarea::placeholder {
  color: #94a3b8;
  font-style: italic;
  line-height: 1.5;
}

input::placeholder {
  color: #94a3b8;
  opacity: 1;
  transition: opacity 0.2s ease;
}

input:focus::placeholder {
  opacity: 0.4;
}

.login-form input::placeholder {
  color: #6366f1;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  opacity: 0.75;
}

.login-form input {
  color: #1e293b;
}

💬 Usage Tips

• Use readable contrast — Placeholder text should be lighter than input text but still legible.
• Scope selectors — Use input::placeholder instead of a global ::placeholder when possible.
• Fade on focus — Lower opacity with input:focus::placeholder for a polished feel.
• Keep hints short — Placeholders work best as brief examples, not instructions.
• Separate typed text — Style the input element itself for the value users type.
• Test in Firefox — Set opacity: 1 on ::-moz-placeholder if using legacy prefixes.

⚠️ Common Pitfalls

• Replacing labels — Placeholders disappear when users type; they are not accessible field names.
• Low contrast — Very light placeholder text can fail WCAG readability guidelines.
• Wrong properties — Background, border, and padding usually do not work on ::placeholder.
• Styling typed text — ::placeholder does not affect values the user enters; style input instead.
• Missing placeholder attr — Without the HTML attribute, there is no hint text to style.
• Single colon syntax — Use ::placeholder (pseudo-element), not :placeholder.

♿ Accessibility

• Always use labels — Every input needs a <label> or aria-label, not just a placeholder.
• Do not hide critical info — Required format hints belong in visible label text or help text.
• Maintain contrast — Placeholder color should meet minimum contrast against the field background.
• Avoid placeholder-only forms — Screen readers may not always announce placeholder text reliably.
• High-contrast mode — Test that hints remain visible when users enable OS high-contrast settings.

💡 Best Practices