How to change an HTML input's placeholder color with CSS?

You can change an input’s placeholder text color with the CSS ::placeholder pseudo-element. In modern browsers, a single rule often suffices:

::placeholder {
  color: red; /* or any color you like */
}

However, for broader compatibility with older browsers, include the vendor-prefixed variants:

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

:-moz-placeholder {
  color: red;
}

::-moz-placeholder {
  color: red;
}

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

Usage Example:

<input type="text" placeholder="Enter name here" class="my-input" />

.my-input::-webkit-input-placeholder {
  color: red;
}
.my-input:-moz-placeholder {
  color: red;
}
.my-input::-moz-placeholder {
  color: red;
}
.my-input:-ms-input-placeholder {
  color: red;
}
.my-input::placeholder {
  color: red;
}

This ensures that the placeholder appears in the specified color across a variety of browsers and versions.

Strengthen Your Web Development Skills

If you’re looking to sharpen your JavaScript fundamentals (which often go hand in hand with CSS and DOM manipulations), check out these courses at DesignGurus.io:

• Grokking JavaScript Fundamentals
• Grokking the Coding Interview: Patterns for Coding Questions

You can also dive into the DesignGurus.io YouTube channel for free tutorials and discussions on coding best practices, front-end development, and system design.