How to Change Placeholder Color in CSS

Introduction

Placeholders often look dull and gray. They don’t match your website’s design and feel out of place. Luckily, CSS gives you an easy way to fix that.

The Problem

By default, most browsers use a light gray color for placeholders. It’s functional but not stylish. When you want your form fields to fit your brand, that default look won’t do the job.

The Solution

You can style placeholders just like any other text element. All it takes is the ::placeholder pseudo-element.
For better browser support, add the ::-webkit-input-placeholder prefix.

Here’s the CSS you need:

::placeholder {
  color: red;
}

::-webkit-input-placeholder {
  color: red;
}

Tips

Use colors that fit your theme and maintain readability. Avoid using very light tones that might blend into the background.
Most modern browsers support ::placeholder, so you rarely need extra prefixes—but including them ensures backward compatibility.

Wrap-up

It’s a small detail, but styled placeholders make your UI feel polished and professional. Clean design starts with paying attention to these tiny touches.