How to Style Placeholders with CSS ::placeholder

The CSS ::placeholder pseudo-element provides web developers with direct control over the appearance of placeholder text inside form inputs and textareas. This article explains what the ::placeholder pseudo-element is, how it works to format and style input cues, which CSS properties are supported, and essential accessibility practices to consider when styling form hints.

What is the ::placeholder Pseudo-Element?

The ::placeholder pseudo-element targets the temporary hint text defined by the placeholder attribute on <input> and <textarea> elements. This text serves as a short cue or instruction to guide the user on what data to enter. By default, browsers display placeholder text in a muted light gray. The ::placeholder selector allows you to override these native browser defaults to match your website's design system.

Basic Syntax and Implementation

To format placeholder cues, target the input element followed by the double-colon pseudo-element selector:

/* Standard syntax */
input::placeholder,
textarea::placeholder {
  color: #6c757d;
  font-style: italic;
  opacity: 1; /* Overrides default browser opacity */
}

You can also target specific input types or custom classes:

.custom-input::placeholder {
  color: #2b6cb0;
  font-weight: 300;
  letter-spacing: 0.5px;
}

Supported CSS Properties

Only a specific subset of CSS properties can be applied to the ::placeholder pseudo-element:

  • Color and Text Styling: color, font-family, font-size, font-weight, font-style, and line-height.
  • Text Decoration and Spacing: text-decoration, text-transform, and letter-spacing.
  • Alignment: text-align to align cues to the left, right, or center.
  • Transparency: opacity to adjust hint visibility.
  • Backgrounds: background-color (rarely used for text, but supported).

Layout-altering properties like margin, padding, width, and display do not affect placeholder text directly; these must be styled on the parent input element itself.

Browser Quirks and Vendor Prefixes

Modern browsers broadly support the standard ::placeholder syntax. However, some older versions require vendor prefixes. When supporting legacy environments, separate each selector into its own rule block because browsers will drop an entire CSS rule if they encounter an unrecognized selector:

/* Modern browsers */
input::placeholder {
  color: #718096;
}

/* Legacy WebKit (Chrome, Safari, Edge) */
input::-webkit-input-placeholder {
  color: #718096;
}

/* Legacy Firefox */
input::-moz-placeholder {
  color: #718096;
  opacity: 1;
}

/* Legacy Internet Explorer and Edge */
input:-ms-input-placeholder {
  color: #718096;
}

Firefox natively applies an opacity lower than 1 to placeholders. Always declare opacity: 1; alongside your custom color property to ensure consistent color rendering across all browsers.

Accessibility Considerations

Formatting placeholder cues requires a balance between visibility and distinction:

  • Color Contrast: Ensure the placeholder color maintains sufficient contrast against the input field background without looking like pre-filled text. High contrast prevents users with low vision from missing the cue.
  • Distinct from Real Input: The styled placeholder should visually differ from actual user-submitted text—often achieved through a slightly lighter shade or an italicized font style—so users do not mistake a hint for completed input.
  • Placeholders Are Not Labels: A placeholder cue vanishes once the user starts typing. Form fields must always include a proper <label> tag for assistive technologies, using the placeholder only as supplementary formatting guidance.