:placeholder-shown CSS pseudo-class

label {
  display: block;
  margin-top: 1em;
}

input:placeholder-shown {
  background-color: ivory;
  border: 2px solid darkorange;
  border-radius: 5px;
}

<label for="name">Full Name:</label>
<input id="name" name="name" type="text" />

<label for="email">Email Address:</label>
<input id="email" name="email" type="email" placeholder="name@example.com" />

<label for="age">Your age:</label>
<input
  id="age"
  name="age"
  type="number"
  value="18"
  placeholder="You must be 18+" />

:placeholder-shown {
  /* ... */
}

<input placeholder="Type something here!" />

input {
  border: 1px solid black;
  padding: 3px;
}

input:placeholder-shown {
  border-color: teal;
  color: purple;
  font-style: italic;
}

<input id="input1" placeholder="Name, Rank, and Serial Number" /> <br /><br />
<input id="input2" placeholder="Name, Rank, and Serial Number" />

#input2:placeholder-shown {
  text-overflow: ellipsis;
}

<p>
  <label for="name">Student Name:</label>
  <input id="name" placeholder="Student Name" />
</p>
<p>
  <label for="branch">Student Branch:</label>
  <input id="branch" placeholder="Student Branch" />
</p>
<p>
  <label for="sid">8-Digit Student ID:</label>
  <input
    pattern="[0-9]{8}"
    id="sid"
    class="student-id"
    placeholder="8 digit id" />
</p>

input {
  background-color: #e8e8e8;
  color: black;
}

input.student-id:placeholder-shown {
  background-color: yellow;
  color: red;
  font-style: italic;
}