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

Source Code: (back to article)

Result: Report an issue

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

<!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="YourEmail@gmail.com">
      <input type="submit" value="Send" />
    </form>
  </body>
</html>