CssHow-ToBeginner · 3 min read

How to Style Placeholder Text in CSS: Simple Guide

You can style placeholder text in CSS using the ::placeholder pseudo-element. This lets you change the color, font, and other styles of the placeholder text inside input or textarea fields.

📐

Syntax

The ::placeholder pseudo-element targets the placeholder text inside input or textarea elements. You write CSS rules inside it to style the placeholder text.

Example parts:

input::placeholder - targets placeholder text in input fields.
textarea::placeholder - targets placeholder text in textarea fields.
Inside the curly braces, you add CSS properties like color, font-style, or opacity.

css

input::placeholder {
  color: gray;
  font-style: italic;
}

💻

Example

This example shows a text input with styled placeholder text. The placeholder text is gray and italic.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Placeholder Style Example</title>
<style>
  input::placeholder {
    color: gray;
    font-style: italic;
  }
  input {
    font-size: 1rem;
    padding: 0.5rem;
    width: 250px;
  }
</style>
</head>
<body>
  <label for="name">Name:</label><br>
  <input type="text" id="name" placeholder="Enter your name">
</body>
</html>

Output

A webpage with a labeled text input box. The placeholder text inside the box says 'Enter your name' in gray italic font.

⚠️

Common Pitfalls

Some common mistakes when styling placeholder text:

Using :placeholder instead of ::placeholder. The double colon is the correct modern syntax.
Not including vendor prefixes for older browsers (like ::-webkit-input-placeholder), but these are mostly unnecessary now.
Trying to style placeholder text with regular input styles (like input { color: red; }) which only affects typed text, not placeholder.

css

/* Wrong: single colon (legacy) */
input:placeholder {
  color: red;
}

/* Correct: double colon (modern) */
input::placeholder {
  color: red;
}

📊

Quick Reference

Selector	Description
input::placeholder	Styles placeholder text in input fields
textarea::placeholder	Styles placeholder text in textarea fields
::-webkit-input-placeholder	Old WebKit browsers prefix (mostly obsolete)
::-moz-placeholder	Old Firefox prefix (mostly obsolete)
opacity	Controls transparency of placeholder text

✅

Key Takeaways

Use the ::placeholder pseudo-element to style placeholder text in inputs and textareas.

You can change color, font style, opacity, and other text styles inside ::placeholder.

Always use double colons (::) for modern CSS syntax.

Vendor prefixes are rarely needed today but existed for older browsers.

Regular input styles do not affect placeholder text; use ::placeholder specifically.