::placeholder
::placeholder styles the placeholder text in form inputs. It accepts text color, font, opacity, and text-shadow properties.
CSS
Beginner
3 min read
::placeholder Pseudo-Element
Example
input::placeholder {
color: #adb5bd;
font-style: italic;
font-size: 0.9rem;
}
/* Darker placeholder on focus */
input:focus::placeholder {
color: #ced4da;
}
/* Matching brand colors */
.search-input::placeholder {
color: rgba(255, 255, 255, 0.7);
} Pro Tip
Keep placeholder text lighter than actual input text — users should distinguish between placeholder and typed content.