How To Change the Color of an HTML5 Input Placeholder Using CSS

HTML5 has an attribute called placeholder. This attribute being used on the <input> and <textarea> elements provides a hint to the user of what can be entered in the field.

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

How to Set Color of the Placeholder Text

The default color of a placeholder text is light grey in most browsers. If you want to change it, you need to use the ::placeholder pseudo-element.

Note that Firefox adds lower opacity to the placeholder, so use opacity: 1; to fix it.

In the case you want to select the input itself when it's placeholder text is being shown, use the :placeholder-shown pseudo-class.

The code example will look like the following.

Example of changing the color of the placeholder text:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input {
        width: 90%;
        padding: 10px;
        margin: 5px;
        outline: none;
      }
      input[type="submit"] {
        width: 150px;
      }
      input::placeholder {
        color: #1c87c9;
        opacity: 1;
      }
      input:placeholder-shown {
        border: 1px solid #095484;
      }
    </style>
  </head>
  <body>
    <form action="/form/submit" method="post">
      First name:
      <input type="text" name="firstname" placeholder="John">
      <br>
      <br> Last name:
      <input type="text" name="lastname" placeholder="Lennon">
      <br>
      <br> Email address:
      <input type="email" name="email" placeholder="[email protected]">
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>

Result

First name:

Last name:

Email address:

You can also change the text color, which will be filled in the place of placeholder. For that purpose, define a class for each <input> element and give styling to it.

Example of setting different colors for the placeholder text:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input {
        padding: 10px;
        margin: 5px;
        width: 90%;
      }
      input[type="submit"] {
        width: 100px;
      }
      .one {
        color: #8ebf42;
      }
      .two {
        color: #ff0066;
      }
      .three {
        color: #1c87c9;
      }
      .one::placeholder {
        color: #1c87c9;
      }
      .two::placeholder {
        color: #ff0000;
      }
      .three::placeholder {
        color: #8ebf42;
      }
      input:placeholder-shown {
        border: 1px solid #095484;
      }
    </style>
  </head>
  <body>
    <form action="/form/submit" method="post">
      First name:
      <input class="one" type="text" name="firstname" placeholder="John">
      <br>
      <br> Last name:
      <input class="two" type="text" name="lastname" placeholder="Lennon">
      <br>
      <br> Email address:
      <input class="three" type="email" name="email" placeholder="[email protected]">
      <input type="submit" value="Send" />
    </form>
  </body>
</html>

It is important to remember that for each browser there is a different implementation way. For example,

  1. ::-webkit-input-placeholder pseudo-element for Chrome/Safari/Opera,
  2. ::-ms-input-placeholder pseudo-class for Edge (also supports webkit prefix).

The above pseudo-class and pseudo-element are necessary to handle the required result.

Example of changing the color of the placeholder text with some extensions used:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input {
        padding: 5px 10px;
      }
      ::placeholder {
        color: #1c87c9;
        opacity: 1;  /* Firefox */
      }
      :-webkit-input-placeholder {
        /* Chrome, Safari, Opera */
        color: #1c87c9;
      }
      ::-ms-input-placeholder {
        /* Microsoft Edge */
        color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <form action="/form/submit" method="post">
      First name:
      <input type="text" name="firstname" placeholder="John">
      <br>
      <br> Last name:
      <input type="text" name="lastname" placeholder="Lennon">
      <br>
      <br> Email address:
      <input type="email" name="email" placeholder="[email protected]">
      <br/>
      <br/>
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>