background

Learn how to style placeholder text in input fields using CSS with Hex color codes, RGB, and HSL values.

CSS Placeholder Color

Placeholders, those frequently grayed out text elements inside an input, can be a challenge to style. Fortunately, we have a short but effective CSS solution to style your input's placeholder text in 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. In this example, we'll use the word 'Search' but you can customize it. The basic HTML is below:

html

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

Input (and textarea) placeholder text defaults to a light gray color, but we can change that with a few lines of CSS. Here we'll color the input text red using a color name, but you can use any color method you prefer (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;
}

It's important to include different vendor prefixes to support as many browsers as possible. Only Firefox's input placeholder text defaults to a slight transparency, so setting the opacity on IE or Chrome is unnecessary.

Changing Placeholder Focus Text Color

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

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;
}

In this example, we've added a few basic styles to the input itself and included a transition on the opacity to enhance the user experience. Check out the demo and feel free to experiment with other CSS properties and transitions.

Share with your friends!
  • Tweet
  • Post
  • LinkedIn
  • Reddit