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

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

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. This standard pseudo-element is now universally supported across all modern browsers.

Tip

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 its placeholder text is being shown, use the <kbd class="highlighted">:placeholder-shown</kbd> pseudo-class.

The code example will look like the following.

Example of changing the color of the placeholder text:

Example of how to select the input itself when its placeholder text is being shown with the :placeholder-shown pseudo-class — CSS Snippets — W3Docs

<!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>

Try it Yourself »

Result

<div class="demo px-2.5 mt-1 mb-5"> <form action-xhr="/form/submit" method="post"> First name: <input name="firstname" placeholder="John" type="text">``</input>
Last name: <input name="lastname" placeholder="Lennon" type="text">``</input>
Email address: <input name="email" placeholder="[email protected]" type="email"></input> <input type="submit" value="Submit">``</input> </form> </div>

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

Example of setting different colors for the placeholder text:

Example of how to change the text color which will be filled in the place of placeholder — CSS Snippets — W3Docs

<!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>

Try it Yourself »