John Mwaniki /   12 May 2023

How to change input and textarea placeholder color with CSS

A form input placeholder is a text displayed within an input field of a web form as an indicator of the type or format of the information expected in that particular field.

For example, the input field for collecting the name may have a placeholder like "Enter your Name" or simply "Name" to guide the user on what information is expected.

The placeholder text disappears once the user starts typing in the field.

To add a placeholder to your form input fields, all you need is to add a placeholder attribute with your desired placeholder text as its value.

Example

<input type="text" id="name" placeholder="Enter your Name">
<textarea id="message" placeholder="Write your message here..."></textarea>

In the above example, we have created an <input> and <textarea> HTML elements, each with a placeholder text to guide the user on what information is expected in each.

The placeholder text is by default displayed in a lighter color (grey in most browsers) from the regular input text. However, you may want to change the placeholder color for some reasons such as to increase its visibility, or to match the design aesthetic of your website.

In this article, you will learn how to modify the placeholder color of HTML inputs using CSS.

Changing the color of HTML inputs placeholder

To change the color of the placeholder text, we use the CSS ::placeholder pseudo-element.

The ::placeholder pseudo-element selects the form elements with a placeholder, and allows you to style the placeholder text, including changing its color.

Syntax

::placeholder {
  /* CSS styling */
}

Example

::placeholder { 
  color: purple;
}

Output:

In the above example, the ::placeholder selector selects all the placeholders on the page and sets their color property to purple.

The Firefox browser adds a lower opacity to the placeholder, so you will want to use opacity: 1 to increase its visibility.

::placeholder { 
  color: purple;
  opacity: 1;
}

Output:

If you want to only change the color of specific placeholder(s) and not all on the page, use a selector such as the element, its class name, or ID value before the ::placeholder pseudo-element.

/* Input elements */
input::placeholder { 
  color: purple;
  opacity: 1;
}

/* Textarea elements*/
textarea::placeholder { 
  color: purple;
  opacity: 1;
}

/* Element with ID 'name' */
#name::placeholder { 
  color: purple;
  opacity: 1;
}

In case the above fails to change the placeholder color on your browser, you may need to add a -webkit-, -moz-, or -ms- prefix to ::placeholder just after the double colon (::).

Example

::-webkit-placeholder { 
  color: orange;
}

::-moz-placeholder { 
  color: orange;
}

::-ms-placeholder { 
  color: orange;
}

::placeholder { 
  color: orange;
}

Feel free to experiment with different color values, such as color names, hexadecimal color codes, RGB, or HSL values, to achieve your desired color for placeholder text.

That's it! Now you know how to customize the placeholder text color in your HTML form input fields using CSS.