Change an HTML input's placeholder color with CSS

html

responsive-design

css

accessibility

byAnton Shumikhin·Feb 1, 2025

Here's a straightforward way to change your input's placeholder color across a variety of browsers with CSS:

/* For modern browsers */
::placeholder {
  color: red; /* Looks like strawberries? Heck yeah! 🍓 */
}

/* WebKit: Chrome, Safari, Opera 15+ */
::-webkit-input-placeholder {
  color: red; /* WebKit knows what's up! */
}

/* Firefox 19+ */
::-moz-placeholder {
  color: red;
  opacity: 1; /* Hey Firefox, don't make my babies transparent! */
}

/* IE 10+, Edge */
:-ms-input-placeholder {
  color: red; /* Even IE gets to join the party */
}

Boost the specificity, avoid conflicts with other styles, ensure your cache isn't hiding your changes, and most importantly, maintain a strong contrast for accessibility.

Diving deeper: what else to consider?

Sometimes placeholder styling can be a tricky thing. Let’s dive into the darkness and unravel some clues:

The need for accessible visibility

Select colors that provide a good contrast against the input's background. This isn’t just an aesthetic fun fact, but it's essential for users with impaired vision. According to the wizardry of Web Content Accessibility Guidelines (WCAG), the contrast ratio of your text against the background should be at least 4.5:1.

Don't cut off your translations

Placeholder text should leave space for language expansion. Because in German (trust me, it can be lonnngg!), your text might look like it's running off a cliff.

Smooth out browser-specific styling

You know how every browser wants to be unique and throws a fit? Let's play fair and make those styles uniform across the board:

input {
  -moz-appearance: textfield;   /* Hey Firefox, play nice! */
  -webkit-appearance: textfield; /* Chrome, Safari, we're looking at you too! */
  appearance: textfield;         /* And let's spread the love to the rest */
}

Pitfalls of cross-browser compatibility

Always remember the golden rule of web development, "Always. Test. Everything!". With -webkit-input-placeholder unique to WebKit browsers, every browser might throw a tantrum at your placeholder styles like border or background-color.

Avoid `!important` if possible

And while we’re at it, avoid !important like it’s the plague. It might seem like a magic wand that fixes everything, but it can lead to bigger problems.

Placeholder vs labels: not the same thing!

Do not — I repeat... DO NOT use a placeholder in place of a label element. They serve different purposes, with labels providing an accessible name for form controls, and placeholders are just chatty attendants giving helpful hints.

Fine-tuning of placeholder aesthetics

Now for the finishing touch on styling placeholders, let’s take you to the secret garden of CSS tricks:

Animating the transitions

Bring your user interactions to life by adding transitions for color changes on focus:

input::placeholder {
  transition: color 0.3s ease; /* Cue dramatic entrance */
}
input:focus::placeholder {
  color: blue; /* Did it just change colors? I think I'm in love 😍 */
}

Mobile view considerations

Always remember to stress-test your inputs and placeholders on mobile devices too. Mobile browsers might have different default font sizes for placeholders, causing a mushroom effect.🍄 Adjust accordingly!

Processors level up

Embrace the power of CSS preprocessors like Sass or Less. Their superpower of mixins can definitely set your game apart, especially when dealing with cross-browser placeholder styling. Here's a simple mixin in Sass:

@mixin placeholder-color($color) {
  ::placeholder { 
    color: $color; 
  }
  @include vendor-prefixes((-webkit,-moz,-ms), input-placeholder, (color: $color));
}

input {
  @include placeholder-color(purple); /* Purple rain, purple rain 🎶 */
}