CSS :placeholder-shown 擬似クラス

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

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

<form>
  <label for="name">名前:</label>
  <input id="name" name="name" type="text" />

  <label for="email">メールアドレス:</label>
  <input id="email" name="email" type="email" placeholder="name@example.com" />

  <label for="age">å¹´é½¢:</label>
  <input
    id="age"
    name="age"
    type="number"
    value="18"
    placeholder="18 歳以上" />
</form>

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

<input placeholder="何か入力してください！" />

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

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

<input id="input1" placeholder="氏名、ランク、シリアル番号" /> <br /><br />
<input id="input2" placeholder="氏名、ランク、シリアル番号" />

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

<form id="test">
  <p>
    <label for="name">生徒名を入力:</label>
    <input id="name" placeholder="生徒名" />
  </p>
  <p>
    <label for="branch">生徒の所属を入力:</label>
    <input id="branch" placeholder="所属名" />
  </p>
  <p>
    <label for="sid">生徒 ID を入力:</label>
    <input
      pattern="[0-9]{8}"
      title="数字 8 桁の ID"
      id="sid"
      class="student-id"
      placeholder="数字 8 桁の id" />
  </p>
  <input type="submit" />
</form>

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

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