CSS :blank Pseudo-Class

CSS :blank Pseudo-Class

The CSS :blank pseudo-class is designed to select user-input form controls that have no entered value. It provides a way to identify blank input fields and text areas without relying on placeholder text or JavaScript. This experimental selector is not currently supported by major browsers.

:blank Syntax

:blank {
  property: value;
}

The :blank pseudo-class has no arguments. It can be combined with a form control selector to target fields with blank user input.

Example Syntax

textarea:blank {
  border: 2px solid #c0392b;
}

This rule is intended to add a red border to a text area while its value is blank.

Important: The selector is experimental and currently unsupported in major browsers. The example demonstrates its proposed behavior, not a reliable production technique.

How :blank Works

The proposed :blank pseudo-class matches user-input elements whose values are empty or otherwise represent null input.

For example, an empty text input or text area would match :blank in a browser that implements the selector. When the user enters a value, the field would stop matching.

Expected Matching Behavior

The matching behavior is based on the control's value, not whether the HTML element contains child elements.

Because the feature remains under development, some details of its definition may change before widespread browser implementation.

Difference Between :blank and :empty

The :blank and :empty pseudo-classes examine different characteristics of an element.

The proposed :blank selector checks whether a user-input control has a blank value. The :empty selector checks whether an element has child content.

HTML

<input type="text" value="Hello">
<textarea></textarea>
<div></div>

CSS

input:empty {
  border: 2px solid #0066cc;
}
textarea:blank {
  border: 2px solid #c0392b;
}
div:empty {
  background-color: #e8f5e9;
  min-height: 30px;
}

The input can match :empty even though its value is Hello, because the input element has no child nodes. The text area is intended to match :blank because its value is empty.

The empty <div> matches :empty because it contains no child content.

Difference Between :blank and :placeholder-shown

The :placeholder-shown pseudo-class matches a form control while its placeholder text is displayed. Unlike :blank, it depends on the presence and display of a placeholder.

HTML

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

CSS

input:placeholder-shown {
  border: 2px solid #0066cc;
}
input:blank {
  background-color: #fff3e6;
}

In current browsers, the first input can match :placeholder-shown while its placeholder is visible. The second input has no placeholder and does not match that selector.

In a future browser that supports :blank, both inputs would be candidates for matching while their values remain blank.

For practical styling today, :placeholder-shown is the more widely supported option when the field has a placeholder.

Blank Fields and Form Validation

A blank field is not necessarily invalid. HTML form validation depends on attributes such as required, type, minlength, and pattern.

HTML

<input type="text" name="nickname">
<input type="email" name="email" required>

The nickname field is optional, so leaving it empty is valid. The email field is required, so leaving it empty makes it invalid.

CSS

input:required:invalid {
  border: 2px solid #c0392b;
}
input:optional {
  border: 2px solid #999;
}

These selectors work in current browsers and provide styling based on actual form validation requirements.

Use :invalid or :user-invalid when the goal is to identify validation problems rather than simply detect a blank value.

Browser Support

Baseline: Limited availability. The :blank pseudo-class is experimental and is not currently implemented in major browsers.

CSS rules containing this unsupported selector are ignored. A browser does not automatically replace :blank with :empty or :placeholder-shown.

Using a Supported Alternative

textarea:placeholder-shown {
  border: 2px solid #c0392b;
}

This alternative works when the text area has a placeholder that is being displayed. It does not provide the same matching behavior as the proposed :blank selector.

For compatibility information, visit Can I Use? and search for CSS :blank.

Best Practices

• Do not rely on :blank for production form styling until browsers implement it.
• Use :placeholder-shown when you need to style a field displaying placeholder text.
• Use :required, :invalid, and :user-invalid for validation-related styling.
• Do not confuse a blank form value with an element that matches :empty.
• Keep visible labels on form fields rather than relying only on placeholders.
• Provide clear validation messages instead of relying exclusively on border colors.
• Test any future use of :blank against actual browser support before deployment.

:blank Example

The following example demonstrates the proposed :blank selector and includes a supported :placeholder-shown alternative so the browser result remains useful.

HTML

<div class="blank-demo">
  <label for="message">Your Message</label>
  <textarea id="message" placeholder="Enter your message"></textarea>
</div>

CSS

.blank-demo label {
  display: block;
  margin-bottom: 8px;
}
.blank-demo textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 100px;
  padding: 10px;
  border: 2px solid #999;
}
.blank-demo textarea:blank {
  background-color: #fff3e6;
}
.blank-demo textarea:placeholder-shown {
  border-color: #c0392b;
}

Browser Result

The text area initially has a red border because its placeholder is visible. Typing a message removes that border styling. The light orange background defined by :blank will not appear in current major browsers.

Play in Editor

Note: The working border effect comes from :placeholder-shown, not :blank. The unsupported selector is included to demonstrate its proposed syntax.

Specifications

The proposed :blank pseudo-class for user-input controls is defined in Selectors Level 4. Its definition remains subject to change.

Selectors Level 4 - The :blank Pseudo-Class

Note: CSS also defines a :blank page pseudo-class for blank pages in paged media. That is a separate feature from the user-input selector discussed here.