Change placeholder color using CSS.

Change Placeholder Color Using CSS

Written by
Vinish Kapoor is a seasoned software development professional and a fervent enthusiast of artificial intelligence (AI). His impressive career spans over 20 years, marked by a relentless pursuit of innovation and excellence in the field of information technology. As an Oracle ACE, Vinish has distinguished himself as a leading expert in Oracle technologies, a title awarded to individuals who have demonstrated their deep commitment, leadership, and expertise in the Oracle community.
  • CSS
  • 1 min read

To change the placeholder color using CSS, you can use the ::placeholder pseudo-element. Below are more details:

The Syntax for Placeholder pseudo-element

::placeholder {
   color: #00FF00;
}

The following is the complete example:

Placeholder Example in CSS

Create an input element with a placeholder in HTML:

<input placeholder="Enter First Name">

The following is the CSS code with all compatibility options for placeholder pseudo-element:

::-webkit-input-placeholder {
    color: #eee;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:  #eee;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #eee;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #eee;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #eee;
}

::placeholder { /* Most modern browsers support this now. */
   color:    #eee;
}

If you have specified an ID to your input element in HTML, then you can select the ID to change the color of the placeholder using CSS. Below is an example:

<input id="fname" placeholder="Enter First Name">
#fname::-webkit-input-placeholder {
    color: #eee;
}
#fname:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:  #eee;
   opacity:  1;
}
#fname::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #eee;
   opacity:  1;
}
#fname:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #eee;
}
#fname::-ms-input-placeholder { /* Microsoft Edge */
   color:    #eee;
}

#fname::placeholder { /* Most modern browsers support this now. */
   color:    #eee;
}