CSS ::placeholder Pseudo-Element

CSS ::placeholder Pseudo-Element

The ::placeholder pseudo-element styles the placeholder text displayed inside an HTML <input> or <textarea> element. It allows developers to change the placeholder's color, font, opacity, and other text-related properties without changing the appearance of the text entered by the user.

Syntax

selector::placeholder {
  property: value;
}

The selector identifies an element that displays placeholder text.

The ::placeholder pseudo-element targets the placeholder text rather than the entire form control.

For example:

input::placeholder {
  color: #666;
}

This rule changes the placeholder text color in input elements.

The selector can also target a specific class or ID:

.search-field::placeholder {
  color: #0066cc;
}

The ::placeholder pseudo-element does not accept arguments or use parentheses.

It uses two colons because it is a pseudo-element, not a pseudo-class.

How It Works

Placeholder text provides a short hint about the expected value of a form field.

For example, an email field might display name@example.com before the user enters an address.

The browser displays this text when the field is empty and the placeholder is applicable.

The ::placeholder pseudo-element allows CSS to style that hint independently of the user's entered text.

For example:

input {
  color: #222;
}
input::placeholder {
  color: #777;
}

The input's entered text appears dark, while the placeholder appears gray.

When the user enters a value, the placeholder disappears and the entered text uses the input's normal styling.

The ::placeholder pseudo-element changes only the presentation of the placeholder. It does not change the input's value, validation, or form submission behavior.

The placeholder Attribute

The HTML placeholder attribute supplies the text displayed inside a supported form control.

For example:

<input type="email" placeholder="name@example.com">

The browser displays name@example.com as a hint while the field is empty.

The ::placeholder pseudo-element styles that text:

input::placeholder {
  color: #0066cc;
  font-style: italic;
}

The HTML attribute defines the placeholder content, while the CSS pseudo-element controls its appearance.

The placeholder attribute is supported by text-entry controls such as text, email, search, URL, and telephone inputs, as well as textareas.

It is not available for every input type. For example, checkboxes and radio buttons do not display placeholder text.

Important: Placeholder text is not a replacement for a visible form label.

Basic Example

The following example changes the placeholder text to blue while keeping entered text dark.

HTML:

<label for="placeholder-basic">Your Name:</label>
<input type="text" id="placeholder-basic" class="placeholder-basic" placeholder="Enter your name">

CSS:

.placeholder-basic {
  color: #222;
  padding: 10px;
  border: 1px solid #999;
  border-radius: 4px;
}
.placeholder-basic::placeholder {
  color: #0066cc;
}

The placeholder appears blue while the field is empty.

Type into the field to see the placeholder disappear.

The entered text uses the input's dark text color rather than the placeholder styling.

Changing Placeholder Color

The color property is commonly used to distinguish placeholder text from entered values.

For example:

input::placeholder {
  color: #777;
}

This rule displays placeholder text in gray.

Different fields can use different placeholder colors:

.name-field::placeholder {
  color: #0066cc;
}
.email-field::placeholder {
  color: #666;
}

Placeholder colors should remain readable against the input's background.

Very light gray text on a white background can be difficult to read, especially for users with low vision.

Use sufficient contrast and avoid relying on placeholder color alone to communicate important information.

Styling Placeholder Fonts

The ::placeholder pseudo-element supports several font-related CSS properties.

For example:

input::placeholder {
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.5px;
}

This rule displays placeholder text in italics with slightly increased letter spacing.

Font size can also be changed:

input::placeholder {
  font-size: 14px;
}

The placeholder font size can differ from the font size of the entered text.

However, large differences may make the field appear inconsistent.

For most forms, use a similar font size for placeholder text and entered values.

Font styling should help users recognize placeholder text without reducing readability.

Controlling Placeholder Opacity

The opacity property controls the transparency of placeholder text.

For example:

input::placeholder {
  color: #333;
  opacity: 0.7;
}

The placeholder uses a dark gray color with partial transparency.

An opacity value of 1 makes the placeholder fully opaque:

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

Some browsers apply their own default placeholder opacity or color.

Explicitly setting color and opacity can help produce a more consistent appearance.

Avoid excessively low opacity values because they can make placeholder text difficult to read.

The final contrast depends on the text color, opacity, and background color together.

Styling Placeholders on Focus

The ::placeholder pseudo-element can be combined with the :focus pseudo-class.

This allows placeholder styling to change when the user focuses on a form field.

For example:

input::placeholder {
  color: #777;
}
input:focus::placeholder {
  color: #0066cc;
}

The placeholder appears gray normally and blue when the input receives focus.

A transition can make the color change smoother:

input::placeholder {
  color: #777;
  transition: color 0.2s;
}
input:focus::placeholder {
  color: #0066cc;
}

The transition applies while the placeholder is visible.

Once the user enters text, the placeholder disappears.

Focus styling should not replace a visible focus indicator on the form control itself.

Styling Textarea Placeholders

The ::placeholder pseudo-element also works with HTML <textarea> elements.

For example:

<label for="placeholder-message">Message:</label>
<textarea id="placeholder-message" placeholder="Enter your message"></textarea>

The placeholder can be styled with:

textarea::placeholder {
  color: #777;
  font-style: italic;
}

This rule displays italic gray placeholder text inside textareas.

Input and textarea placeholders can also share the same styling:

input::placeholder, textarea::placeholder {
  color: #666;
  opacity: 1;
}

This provides a consistent placeholder appearance across multiple form controls.

The placeholder disappears when the user enters content into the textarea.

Example

The following example demonstrates different placeholder styles in a small contact form.

HTML:

<div class="placeholder-demo">
  <label for="placeholder-name">Name:</label>
  <input type="text" id="placeholder-name" class="placeholder-name" placeholder="Enter your name">
  <label for="placeholder-email">Email:</label>
  <input type="email" id="placeholder-email" class="placeholder-email" placeholder="name@example.com">
  <label for="placeholder-notes">Message:</label>
  <textarea id="placeholder-notes" class="placeholder-notes" placeholder="Enter your message"></textarea>
</div>

CSS:

.placeholder-demo {
  max-width: 300px;
}
.placeholder-demo label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}
.placeholder-demo input, .placeholder-demo textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  margin-bottom: 12px;
  border: 1px solid #999;
  border-radius: 4px;
  color: #222;
  font: inherit;
}
.placeholder-demo textarea {
  min-height: 80px;
  resize: vertical;
}
.placeholder-name::placeholder {
  color: #0066cc;
  opacity: 1;
}
.placeholder-email::placeholder {
  color: #666;
  font-style: italic;
  opacity: 1;
}
.placeholder-notes::placeholder {
  color: #666;
  opacity: 1;
}
.placeholder-demo input:focus::placeholder, .placeholder-demo textarea:focus::placeholder {
  color: #0066cc;
}
.placeholder-demo input:focus-visible, .placeholder-demo textarea:focus-visible {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

The name field displays blue placeholder text.

The email field displays italic gray placeholder text.

The message field displays standard gray placeholder text.

When a field receives focus, its placeholder changes to blue.

Entering text removes the placeholder from that field.

All three controls retain visible labels and keyboard focus indicators.

::placeholder vs. :placeholder-shown

The ::placeholder pseudo-element and :placeholder-shown pseudo-class are related but serve different purposes.

::placeholder

The ::placeholder pseudo-element styles the placeholder text itself.

input::placeholder {
  color: #0066cc;
}

This rule changes the placeholder text color.

:placeholder-shown

The :placeholder-shown pseudo-class selects a form control while it is displaying placeholder text.

input:placeholder-shown {
  border-color: #999;
}

This rule changes the border of the input while its placeholder is displayed.

The distinction is important:

• ::placeholder styles the placeholder text.
• :placeholder-shown styles the form control based on whether placeholder text is being displayed.

Both selectors can be used together:

input:placeholder-shown {
  background-color: #f8f9fa;
}
input::placeholder {
  color: #666;
}

The input receives a light background while the placeholder is shown, and the placeholder text appears gray.

Supported CSS Properties

The ::placeholder pseudo-element supports a limited set of CSS properties related primarily to text presentation.

Commonly used properties include:

For example:

input::placeholder {
  color: #666;
  font-style: italic;
  letter-spacing: 0.5px;
  opacity: 1;
}

These declarations change the placeholder's text appearance without modifying the entered value.

Properties that control the layout of the entire input, such as its width, height, and padding, should generally be applied to the form control rather than its placeholder.

Limitations

The ::placeholder pseudo-element has several important limitations.

• It applies only to placeholder text in supported form controls.
• It does not change the text supplied by the HTML placeholder attribute.
• It does not style text entered by the user.
• It does not provide placeholder functionality to unsupported input types.
• It does not replace form labels or accessible instructions.
• Some text-related properties may be affected by browser rendering differences.
• It cannot be used to style arbitrary text inside an input element.

For example, this CSS does not create placeholder text:

input::placeholder {
  color: blue;
}

The input must already have applicable placeholder content, usually provided by the HTML placeholder attribute.

Use the attribute to supply the hint and ::placeholder to style it.

Accessibility Considerations

Placeholder text can provide useful examples or formatting hints, but it should not replace a visible label.

Follow these accessibility practices:

• Provide a visible <label> for each form control.
• Use placeholder text for short hints or examples rather than essential instructions.
• Maintain sufficient contrast between placeholder text and its background.
• Avoid very low opacity values that make placeholder text difficult to read.
• Do not rely on placeholder text as the only way to identify a field.
• Preserve visible keyboard focus indicators.
• Ensure entered text remains clearly distinguishable from placeholder text.
• Test form controls at different zoom levels and with assistive technologies.

Placeholder text disappears when the user enters a value, making it unsuitable for instructions that must remain visible.

Users with memory or cognitive difficulties may also have trouble recalling instructions that disappear while typing.

Use labels and persistent help text for important information.

As a general accessibility target, placeholder text should provide at least a 4.5:1 contrast ratio against its background for normal-sized text.

Browser Support

The ::placeholder pseudo-element is widely supported in modern browsers, including Chrome, Edge, Firefox, and Safari.

Older browser versions may require vendor-prefixed selectors or may use different default placeholder styling.

For modern websites, the standard ::placeholder syntax is generally sufficient.

For current compatibility information, visit Can I Use? .

Specifications

The ::placeholder pseudo-element is defined in the CSS Pseudo-Elements Module Level 4 .

The HTML placeholder attribute is defined in the WHATWG HTML Living Standard .

These specifications describe placeholder content and the CSS styling mechanisms used to control its appearance.