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 enting a value. Using the placeholder attribute, you can add a placeholder text to HTML input field.

Generally, the color of the placeholder text is grey for most browser. The placeholder text color also can be changed using the ::placeholder selector in CSS. Custom placeholder color is very useful to make the input filed UI identical with 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.

::-webkit-input-placeholder { /* Chrome, Opera, and Safari */
  color: red;
}
:-moz-placeholder { /* Firefox 18- */
  color: red;
}
::-moz-placeholder { /* Firefox 19+ */
  color: red;
}
:-ms-input-placeholder { /* Microsoft Edge */
  color: red;
}