CSS Placeholder Color

Placeholders, those frequently grayed out text elements inside an input, can be a pain to style. Fortunately we've sourced a short but effective CSS solution to style your input's placeholder text any color and opacity you wish. Read on for the code.

Changing placeholder text color

Let's start with a simple input and some placeholder text, for this example we'll use the word 'search' but you can use anything you want. The basic HTML is below:

HTML
<body>
  <input placeholder="Search">
</body>

Input (and textarea) placeholder text defaults to a light gray color, however, we can change that with a few lines of CSS. Here we'll color the input text red using an HTML color name, but any color method will suffice (HEX, RGB, HSL).

CSS
::-webkit-input-placeholder { /* Chrome */
  color: red;
}
:-ms-input-placeholder { /* IE 10+ */
  color: red;
}
::-moz-placeholder { /* Firefox 19+ */
  color: red;
  opacity: 1;
}
:-moz-placeholder { /* Firefox 4 - 18 */
  color: red;
  opacity: 1;
}

Demo on CodePen

Note that it's important to include the different vendor prefixes in order to support as many browsers as possible. Only Firefox's input placeholder text defaults to a slight transparency so its unnecessary to set the opacity property on IE or Chrome.

Changing placeholder focus text color

Alright, we've successfully changed the color of the placeholder text to red, but it would be nice if something happened when a user clicks inside our input. Using the same vendor prefixed CSS properties, we can alter the opacity of the input placeholder text on focus.

CSS
input {
  outline: none;
  padding: 12px;
  border-radius: 3px;
  border: 1px solid black;
}
::-webkit-input-placeholder { /* Chrome */
  color: red;
  transition: opacity 250ms ease-in-out;
}
:focus::-webkit-input-placeholder {
  opacity: 0.5;
}
:-ms-input-placeholder { /* IE 10+ */
  color: red;
  transition: opacity 250ms ease-in-out;
}
:focus:-ms-input-placeholder {
  opacity: 0.5;
}
::-moz-placeholder { /* Firefox 19+ */
  color: red;
  opacity: 1;
  transition: opacity 250ms ease-in-out;
}
:focus::-moz-placeholder {
  opacity: 0.5;
}
:-moz-placeholder { /* Firefox 4 - 18 */
  color: red;
  opacity: 1;
  transition: opacity 250ms ease-in-out;
}
:focus:-moz-placeholder {
  opacity: 0.5;
}

Demo on CodePen

In the example above we've thrown in a few basic styles on the input itself, and added a transition on the opacity to make the experience just a little nicer. Check out the demo and experiment with other CSS properties and transitions.