How to Change Input Placeholder Color using CSS

The placeholder displays a short hint of the expected value of an input field. It helps the user to know about the format of the input before entering a value. Using the placeholder attribute, you can add a placeholder text to an HTML input field.

Generally, the color of the placeholder text is grey for most browsers. The placeholder text color can also be changed using the ::placeholder selector in CSS. Custom placeholder color is very useful to make the input field UI identical to HTML form UI. In this code snippet, we will show you how to change the placeholder color of a form element using CSS.

The ::placeholder selector (pseudo-element) allows you to customize the style of the placeholder text in the input fields. The following code snippet changes the placeholder text color to red with ::placeholder element using CSS.

<input type="text" placeholder="Enter your email...">

The following CSS will change the placeholder color across all major browsers:

input::placeholder {
  color: red;
}

Not only color, but you can also change the appearance of the placeholder text:

input::placeholder {
  font-size: 1.2em;
  font-style: italic;
  color: red;
  opacity: 0.5;
}

The input::placeholder will apply to the input elements only. If you want to apply the placeholder appearance for the textarea element, use the ::placeholder like below:

textarea::placeholder {
  color: red;
}