:placeholder-shown
A selector that matches an <input> or <textarea> element ONLY while it is currently showing its placeholder text (meaning the field is empty).
Syntax
/* Usage Example */
input:placeholder-shown {
/* Adds a subtle border until the user starts typing */
border: 1px dashed #ccc;
background-color: #fafafa;
}:placeholder-shown Browser support
Widely available
Since
2020 96% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2020.
47+
51+
9+
79+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more