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:
color: value
}
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
color: rgb(17, 0, 255);
}
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:
color: value
}
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)”:
color: 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.