CSS: How to Change Placeholder Text Style

The placeholder text in form inputs is a subtle but important UI element. It provides users with hints or examples of what to enter. By default, placeholder text often appears in a light gray color and may not always match your site’s design.

In this blog, we’ll show you how to change the style of placeholder text using CSS—including color, font size, and more.

Table of Contents

✅ The Pseudo-Element: `::placeholder`

To style placeholder text in CSS, you use the ::placeholder pseudo-element.

🔧 Basic Syntax:

input::placeholder {
  /* CSS properties here */
}

Works with <input>, <textarea>, and any element that supports a placeholder attribute.

🎯 Example: Change Placeholder Text Color

✅ HTML:

<input type="text" placeholder="Enter your name">

✅ CSS:

input::placeholder {
  color: #888;
}

This changes the placeholder text color to a soft gray.

🖌️ More Styling Options

You can apply several styles to placeholder text:

input::placeholder {
  color: #555;
  font-size: 1rem;
  font-style: italic;
  letter-spacing: 1px;
}

Property	Description
`color`	Changes placeholder text color
`font-size`	Adjusts size of placeholder text
`font-style`	Makes placeholder italic or normal
`letter-spacing`	Adds spacing between characters

💡 Styling Placeholders in `textarea`

The same rules apply to <textarea>:

<textarea placeholder="Type your message..."></textarea>

textarea::placeholder {
  color: #999;
  font-style: italic;
}

⚠️ Cross-Browser Compatibility

Modern browsers support ::placeholder, but for older versions of Internet Explorer and Edge, you may need vendor prefixes:

/* Modern */
input::placeholder {
  color: gray;
}

/* Safari, Firefox */
input::-webkit-input-placeholder {
  color: gray;
}
input::-moz-placeholder {
  color: gray;
}
input:-ms-input-placeholder {
  color: gray;
}
input:-moz-placeholder {
  color: gray;
}

✨ Bonus: Tailwind CSS Example

If you’re using Tailwind CSS:

<input class="placeholder-gray-500 placeholder-italic" placeholder="Enter email">

Tailwind provides utility classes to control placeholder styles directly.

✅ Summary

Task	CSS
Change color	`color: #888;`
Style font	`font-style: italic;`
Increase size	`font-size: 1.2rem;`
Adjust spacing	`letter-spacing: 1px;`

Conclusion

Customizing placeholder text with CSS enhances the user interface by aligning it with your brand style. Whether you’re adjusting the color, size, or font style, the ::placeholder pseudo-element gives you full control over the placeholder’s appearance.

With proper styling, you can make forms more engaging and user-friendly.

✅ The Pseudo-Element: ::placeholder