CSS :placeholder-shown Pseudo-Class

CSS :placeholder-shown Pseudo-Class

The CSS :placeholder-shown pseudo-class selects an <input> or <textarea> element while its placeholder text is being displayed. It allows developers to style the entire form control differently before the user enters a value.

:placeholder-shown Syntax

selector:placeholder-shown {
  property: value;
}

The :placeholder-shown pseudo-class matches a supported form control when its placeholder text is currently displayed.

Basic Example

input:placeholder-shown {
  background-color: #eaf6fc;
}

Applies a light blue background to an input while its placeholder is displayed.

Textarea Example

textarea:placeholder-shown {
  border-color: #006699;
}

Changes the border color of a textarea while its placeholder is displayed.

Combined Selector

input:placeholder-shown,
textarea:placeholder-shown {
  background-color: #eaf6fc;
}

Applies the same styling to supported inputs and textareas displaying placeholder text.

No Parentheses

The :placeholder-shown pseudo-class does not accept arguments and is written without parentheses.

How :placeholder-shown Works

When a supported form control has placeholder text and is displaying it, the browser matches :placeholder-shown. When the placeholder is no longer displayed, the selector stops matching.

HTML Example

<label for="username">Username:</label>
<input type="text" id="username" placeholder="Enter your username">

CSS Example

input {
  border: 2px solid #ccc;
}
input:placeholder-shown {
  border-color: #006699;
}

Initially, the input displays its placeholder and receives a blue border. When the user enters text, the placeholder disappears and the border returns to gray.

When the Field Is Empty

An empty supported input generally displays its placeholder when a nonempty placeholder is provided, causing it to match :placeholder-shown.

When the Field Has a Value

When a value replaces the placeholder, the input stops matching :placeholder-shown.

When the Value Is Cleared

If the user removes the entered value and the placeholder is displayed again, the input matches :placeholder-shown again.

Automatic Updates

The browser updates the selector automatically as the placeholder's visibility changes. JavaScript is not required for ordinary state styling.

Input Elements

The :placeholder-shown pseudo-class works with input types that support placeholder text, including common text-entry controls.

Text Input

<input type="text" placeholder="Enter your name">

input[type="text"]:placeholder-shown {
  background-color: #eaf6fc;
}

The text input matches while its placeholder is displayed.

Email Input

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

input[type="email"]:placeholder-shown {
  border-color: #006699;
}

The email input matches while its example email address is displayed as placeholder text.

Search Input

<input type="search" placeholder="Search tutorials">

The search input matches while its search prompt is displayed.

Password Input

<input type="password" placeholder="Enter your password">

The password input matches while its placeholder is displayed, before a password value is entered.

Other Supported Types

Other text-entry types, such as tel and url, also support placeholders. Input types that do not display placeholder text, such as checkboxes and range sliders, are not appropriate targets.

Textarea Elements

The <textarea> element supports placeholder text and can match :placeholder-shown while that text is displayed.

HTML Example

<label for="comments">Comments:</label>
<textarea id="comments" placeholder="Enter your comments"></textarea>

CSS Example

textarea:placeholder-shown {
  background-color: #eaf6fc;
  border-color: #006699;
}

The textarea receives a light blue background and blue border while its placeholder is displayed.

After Entering Text

When the user types a value into the textarea, its placeholder disappears and the pseudo-class stops matching.

Clearing the Textarea

When the textarea becomes empty again and its placeholder reappears, the selector matches again.

Textarea Whitespace

Whitespace between the opening and closing <textarea> tags can become part of the initial value. Keep the textarea empty when demonstrating placeholder behavior.

The Placeholder Attribute

The HTML placeholder attribute provides a short hint or example of the expected value for a supported form control.

Placeholder Example

<input type="text" placeholder="Enter a page title">

The placeholder appears when the field is empty and the browser displays the hint.

Placeholder Is Not a Value

<input type="text" placeholder="Enter a page title" value="CSS Basics">

The input initially displays CSS Basics as its value rather than displaying the placeholder. It does not match :placeholder-shown while that value is present.

Placeholder Is Not a Label

<label for="page-title">Page Title:</label>
<input type="text" id="page-title" placeholder="Enter a page title">

The label identifies the control, while the placeholder provides an additional hint. Placeholder text should not replace a visible label.

Attribute vs. Pseudo-Class

input[placeholder] {
  border: 1px solid #ccc;
}
input:placeholder-shown {
  background-color: #eaf6fc;
}

The attribute selector matches an input whenever the placeholder attribute is present. The pseudo-class matches only while the placeholder is displayed.

:placeholder-shown vs. ::placeholder

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

Comparison

Styling the Form Control

input:placeholder-shown {
  background-color: #eaf6fc;
  border-color: #006699;
}

This rule styles the input element while it displays its placeholder.

Styling Placeholder Text

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

This rule styles the placeholder text rather than the entire input.

Using Both Selectors

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

These selectors can be combined to style both the form control's placeholder state and the appearance of its placeholder text.

Focus and User Input

Focus and placeholder visibility are separate states. A field can be focused while still displaying its placeholder.

Placeholder While Focused

input:focus:placeholder-shown {
  border-color: #006699;
  background-color: #eaf6fc;
}

Matches a focused input while its placeholder is still displayed.

Focused Field with a Value

input:focus:not(:placeholder-shown) {
  border-color: #2e7d32;
}

Matches a focused input when it is no longer displaying its placeholder.

Clearing the Field

When the user clears the input and the placeholder reappears, :placeholder-shown matches again, even if the field remains focused.

Not a User Interaction History Selector

The pseudo-class does not indicate whether a user has previously edited the field. It reflects the current placeholder display state.

Focus Indicators

When styling focused fields, preserve a clear visible focus indicator for keyboard users. Do not remove focus outlines without providing an accessible replacement.

Floating Labels

The :placeholder-shown pseudo-class is often used to create floating labels that move when the field receives focus or contains a value.

HTML Example

<div class="floating-field">
  <input type="text" id="site-name" placeholder=" " required>
  <label for="site-name">Site Name</label>
</div>

CSS Example

.floating-field {
  position: relative;
}
.floating-field input {
  width: 100%;
  box-sizing: border-box;
  padding: 18px 10px 6px;
  border: 1px solid #999;
}
.floating-field label {
  position: absolute;
  top: 12px;
  left: 10px;
  color: #666;
  transition: top 0.2s, font-size 0.2s;

}
.floating-field input:focus + label,
.floating-field input:not(:placeholder-shown) + label {
  top: 3px;
  font-size: 0.75rem;
}

The label moves upward when the input receives focus or stops displaying its placeholder.

Why Use a Space Placeholder?

The example uses placeholder=" " to establish a placeholder state without displaying a separate text hint. The visible label continues to identify the field.

Accessibility Considerations

Keep a real <label> element associated with the input. A floating label should remain readable when the field is focused or contains a value.

Reduced Motion

@media (prefers-reduced-motion: reduce) {
  .floating-field label {
    transition: none;
  }
}

Disables the label transition for users who prefer reduced motion.

Related Pseudo-Classes

Several form-state pseudo-classes can be combined with :placeholder-shown to style controls based on focus, validity, and required state.

Comparison

Placeholder vs. Required

input:required:placeholder-shown {
  background-color: #fff8e6;
}

Matches a required input while its placeholder is displayed.

Placeholder vs. Invalid

A required empty input can match both :placeholder-shown and :invalid. These pseudo-classes describe different conditions.

Placeholder vs. Empty

The :empty pseudo-class concerns an element's DOM children. It is not a general-purpose test for whether a form control has an empty value.

:placeholder-shown Specificity

The :placeholder-shown pseudo-class contributes a specificity of 0-1-0, like other standard pseudo-classes.

Specificity Examples

Specificity Example

input {
  background-color: #fff;
}
input:placeholder-shown {
  background-color: #eaf6fc;
}

When both rules match and other cascade factors are equal, the :placeholder-shown rule takes precedence because it has greater specificity.

Combined Pseudo-Classes

input:focus:placeholder-shown {
  border-color: #006699;
}

Combining :focus and :placeholder-shown increases specificity because both pseudo-classes contribute to the selector.

Practical Uses

The :placeholder-shown pseudo-class is useful for distinguishing form controls before and after users enter values.

Placeholder Background

input:placeholder-shown {
  background-color: #eaf6fc;
}

Applies a light background while placeholder text is displayed.

Placeholder Border

textarea:placeholder-shown {
  border-color: #006699;
}

Highlights a textarea while its placeholder is visible.

Filled Field Appearance

input:not(:placeholder-shown) {
  background-color: #fff;
}

Styles an input when it is not displaying its placeholder. This does not guarantee that every matching input contains a user-entered value.

Floating Labels

input:focus + label,
input:not(:placeholder-shown) + label {
  font-size: 0.75rem;
}

Changes the appearance of an adjacent label when the field is focused or no longer displays its placeholder.

Styling the Parent Container

.form-field:has(input:placeholder-shown) {
  background-color: #eaf6fc;
}

Highlights a form-field container while its input displays placeholder text.

Limitations

The :placeholder-shown pseudo-class describes placeholder display, not every possible form-value state.

Requires Placeholder Support

The control must support placeholder text and be displaying it. An input without a placeholder does not match simply because it is empty.

Not a General Empty-Value Selector

An empty input without a displayed placeholder does not necessarily match :placeholder-shown.

Not a Validation Selector

The pseudo-class does not determine whether a field is valid or invalid.

Not a User Interaction Selector

The selector does not indicate whether a user has previously focused or edited a field.

Not the Placeholder Text Selector

Use ::placeholder to style the placeholder text itself.

Placeholder Visibility Can Vary

Browser behavior and control states can affect whether placeholder text is displayed. The pseudo-class reflects the displayed placeholder state rather than merely the presence of the attribute.

Accessibility

Placeholder text may disappear when users enter a value and should not be the only way a form field is identified.

Best Practices

• Use :placeholder-shown to style supported form controls while their placeholder text is displayed.
• Use ::placeholder when styling the placeholder text itself.
• Provide visible labels instead of relying on placeholders as field names.
• Keep placeholder hints short and relevant to the expected input.
• Do not treat :placeholder-shown as a general test for an empty value.
• Use :focus or :focus-visible for appropriate focus styling.
• Use :valid, :invalid, or :user-invalid for validation feedback.
• Test fields with empty values, entered values, and cleared values.
• Keep floating labels readable and accessible in all states.
• Maintain sufficient contrast for placeholder text and form controls.

:placeholder-shown Example

This example uses a text input and a textarea with placeholder text. Both controls initially have a light blue background and blue border. Enter text to remove the placeholder styling, then clear the fields to restore it.

HTML

<div class="placeholder-demo">
  <label for="demo-title">Page Title</label>
  <input type="text" id="demo-title" placeholder="Enter a page title">
  <label for="demo-description">Description</label>
  <textarea id="demo-description" rows="3" placeholder="Enter a description"></textarea>
</div>

CSS

.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: 2px solid #ccc;
  background-color: #fff;
}
.placeholder-demo :placeholder-shown {
  border-color: #006699;
  background-color: #eaf6fc;
}
.placeholder-demo ::placeholder {
  color: #666;
}

Browser Result

Play in Editor

Note: The blue background and border are applied to the form controls while their placeholders are displayed. The ::placeholder rule separately controls the placeholder text color.

Browser Support

Baseline: Widely available. The :placeholder-shown pseudo-class is supported in modern versions of Chrome, Edge, Firefox, Safari, and other major browsers. Older browsers may require different behavior or may not recognize the selector.

For current compatibility information, visit Can I Use? .

Specifications

The :placeholder-shown pseudo-class is defined in CSS Selectors Level 4. It matches an input or textarea element while placeholder text is being displayed.

Selectors Level 4 - Placeholder-Shown Pseudo-Class