CSS: How to Change Placeholder Text Style

The placeholder text in form fields (like <input> or <textarea>) is helpful for guiding users. But by default, it looks gray and often blends in. If you want to customize the style—like changing its color, size, or font—you can easily do that with CSS!

In this blog post, you’ll learn:

• ✅ How to select and style placeholder text
• 🎨 What styles you can apply
• 🧪 Real code examples
• 🌐 Cross-browser tips

✅ How to Select Placeholder Text in CSS

Use the ::placeholder pseudo-element to target placeholder text:

::placeholder {
  /* style here */
}

But for compatibility and specificity, you should often use it with a selector:

input::placeholder {
  color: #888;
  font-style: italic;
}

🧪 Example: Custom Placeholder Style

✅ HTML:

<input type="text" placeholder="Enter your name" class="custom-input">

✅ CSS:

.custom-input::placeholder {
  color: #555;
  font-size: 16px;
  font-weight: 300;
  opacity: 1; /* Some browsers default to less than 1 */
}

✅ Result: The placeholder appears darker, larger, and fully visible.

🎨 What Can You Style?

You can apply many text styles to placeholders:

🌐 Cross-Browser Support

Most modern browsers support the standard ::placeholder.
However, for older browser compatibility, use these vendor prefixes:

input::-webkit-input-placeholder {
  color: #888;
}

input:-moz-placeholder {
  color: #888;
  opacity: 1;
}

input::-moz-placeholder {
  color: #888;
  opacity: 1;
}

input:-ms-input-placeholder {
  color: #888;
}

✅ Modern browsers like Chrome, Firefox, Edge, and Safari now mostly support the unprefixed ::placeholder.

🚫 Limitations

• You can’t change the actual placeholder text with CSS — only the style.
• If you want to dynamically change the text, use JavaScript:

document.querySelector("input").placeholder = "New placeholder!";

🧠 Summary

🏁 Final Thoughts

Styling placeholder text helps improve form usability and branding. Whether you’re matching your UI theme or making forms more accessible, CSS gives you full control over the look of placeholder text.

Just remember: placeholders are hints, not replacements for labels.