CssHow-ToBeginner · 3 min read

How to Use ::placeholder in CSS for Styling Input Placeholders

Use the ::placeholder pseudo-element in CSS to style the placeholder text inside input or textarea fields. It lets you change color, font, and other styles of the placeholder text that appears before the user types.

📐

Syntax

The ::placeholder pseudo-element targets the placeholder text inside input or textarea elements. You write it after the selector for the input field.

input::placeholder targets placeholder text in input fields.
textarea::placeholder targets placeholder text in textareas.
You can style properties like color, font-style, and opacity.

css

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

💻

Example

This example shows a text input with placeholder text styled to be light gray and italic. The placeholder text disappears when you start typing.

html

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

Output

A webpage with a labeled text input box showing italic, gray placeholder text 'Enter your name here' inside the input field before typing.

⚠️

Common Pitfalls

Some common mistakes when using ::placeholder include:

Using a single colon :placeholder instead of double colons ::placeholder. The double colon is the modern standard.
Not setting opacity can make placeholder text too faint or invisible in some browsers.
Trying to style placeholder text on unsupported elements (only inputs and textareas support it).
For older browsers, vendor prefixes like ::-webkit-input-placeholder may be needed, but modern browsers support the standard ::placeholder.

css

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

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

📊

Quick Reference

Selector	Description
input::placeholder	Styles placeholder text in input fields
textarea::placeholder	Styles placeholder text in textarea fields
::placeholder	General placeholder pseudo-element for inputs and textareas
::-webkit-input-placeholder	WebKit browsers older prefix
::-moz-placeholder	Firefox older prefix
::-ms-input-placeholder	Internet Explorer older prefix

✅

Key Takeaways

Use the double colon ::placeholder to style placeholder text in inputs and textareas.

You can change color, font style, and opacity of placeholder text for better user experience.

Placeholder styles only apply to input and textarea elements, not other HTML elements.

Modern browsers support ::placeholder without prefixes, but older browsers may need vendor prefixes.

Always test placeholder visibility and contrast for accessibility.