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

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

How to Set the Color of the Placeholder Text

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

Note that Firefox adds a 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 this:

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input {
      width: 90%;
      padding: 10px;
      margin: 5px;
      outline: none;
      }
      input::placeholder {
      color: #1c87c9;
      opacity: 1;
      }
      input:placeholder-shown {
      border: 1px solid #095484;
      }
    </style>
  </head>
  <body>
    <form action="/action_page.php">
      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="YourEmail@gmail.com">
    </form>
  </body>
</html>

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

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input {
      padding: 10px;
      margin: 5px;
      width: 90%;
      }
      .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="/action_page.php">
      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="YourEmail@gmail.com">
    </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

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      ::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="/action_page.php">
      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="YourEmail@gmail.com">
    </form>
  </body>
</html>

Do you find this helpful?

Related articles