<\/span><\/h2>\n\n\n\nMost modern web browsers support a ::placeholder pseudo-element that allows you to select and style only the placeholder text of CSS input. Here is the code to change the HTML input’s placeholder color to red.<\/p>\n\n\n\n
input::placeholder{
color:red;
}
OR
::placeholder{
color:red;
}<\/pre>\n\n\n\nThe above code will select and style only the text mentioned as placeholder attribute of input text and textarea. <\/p>\n\n\n\n
Also, it will change the placeholder color of all text input on your web page, whether it is a textbox or textarea. If you only want to change color of specific text input, then you can customize your CSS selector. Here is an example to change placeholder color of input which accepts email address.<\/p>\n\n\n\n
input[type=\"email\"]::placeholder {
color: red;
} <\/pre>\n\n\n\nHere are code snippets to change placeholder colors for password input.<\/p>\n\n\n\n
input[type=\"email\"]::placeholder {
color: red;
} <\/pre>\n\n\n\nIf you have a textrarea on your page, then you will need to use textarea tag in your CSS selector, instead of input. Let us say you have the following textarea.<\/p>\n\n\n\n
<textarea id=\"my_text\" placeholder=\"hello, good morning\" >
<\/textarea><\/pre>\n\n\n\nHere is the CSS to change its placeholder font color.<\/p>\n\n\n\n
textarea::placeholder{
color:red;
}<\/pre>\n\n\n\n