: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).
Quick 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.
Safe to use without fallbacks.
47+
51+
9+
79+