How to Change Input Placeholder Color Using CSS

An input placeholder specifies expected input from the user by giving hints or descriptions. Most hints and descriptions disappear when they specify something in the input field. By default, the color of the input placeholder is gray; however, in some conditions, it is important to modify the color of the input placeholder to increase its visibility.

In this manual, we will explain different methods to change the color of the input placeholder using CSS.

Method 1: Change Input Placeholder Color Using “::placeholder” Selector

CSS “::placeholder” selector is used to select the form elements with the placeholder text. It can be utilized to change the placeholder text. Additionally, you can use this selector to modify the color of the input placeholder.

Syntax

The syntax of the ::placeholder is as follows:

In the place of “value”, you can set the color of the input placeholder according to our choice.

Let’s move to the practical example, where we will change the color of the input placeholder.

Example

To change the input placeholder color, firstly, we will create an input element using the <input> tag and set the type of input as “text”. Next, set the text of the input placeholder as “Enter your name”.

HTML

The output of the given code is:

The default color of the input placeholder is shown in the above-given image.

Now, we move to the CSS and use “::placeholder” to access the text of the input placeholder and set its color as “rgb(17, 0, 255)”.

CSS

As you can see, the color of the added input placeholder is changed to blue:

There is another method to change the color of the input placeholder. Let’s check it out.

Method 2: Change Input Placeholder Color Using “::-webkit-input-placeholder” Pseudo-class Element

“::–webkit-input-placeholder” pseudo-class element primarily represents the placeholder text of a form element. It can be utilized by theme designers and developers to customize the look of the placeholder text. Additionally, by using the specified element user can modify the color of an input placeholder.

Syntax

Syntax of the ::-webkit-input-placeholder is given as:

In the place of “value”, you can set the color of the input placeholder.

Let’s move to the example to understand the above-discussed pseudo-class element.

Example

In CSS file, use the “::-webkit-input-placeholder” pseudo-class element and assign the value of color as “rgb(255, 13, 13)”:

Output

Here, you can see that the default color of the input placeholder is changed.

Conclusion

The color of the input placeholder is changed by using the “::placeholder” selector and “::–webkit-input-placeholder” pseudo-class element. Using this, you can change the default color of the input placeholder. In this article, we have explained the procedure related to changing the color of the input placeholder using CSS properties.