Result


:placeholder-shown疑似クラスを使ってlabelのスタイルを入力の有無でスイッチします

css

Code :
.input-label {
  color: blue;
}
.input :not(*):placeholder-shown, .input-label {/*入力されたとき*/
  color: green;
}
.input-control:placeholder-shown ~ .input-label {/*入力されてないとき*/
  color: red;
}

html

Code :
<div class="input">
  <input class="input-control" id="input" placeholder="hogehoge" />
  <label class="input-label" for="input">入力すると色が変わります</label>
</div>

can i use


各ブラウザの対応状況です。IEは別途、何かしら対応する必要がありそうです

via