Result

:validを使って実装。:validと:invalidは過去記事（かなり昔の記事です）をご参照ください
:invalidや:valid擬似クラスを使ったフォームバリデーションエラーメッセージのスタイルサンプル

css

form {/*全体設定*/
  width: 450px;
  margin: 2em auto;
  font-weight: 300;
  font-size: 22px;
}

.float-label .control {/*各項目レイアウト*/
  float: left;
  position: relative;
  width: 100%;
  border-bottom: 1px solid #ddd;
  padding-top: 23px;
  padding-bottom: 10px;
}
.float-label .control.small {
  width: 30%;
  border-right: 1px solid #ddd;
}
.float-label .control.medium {
  width: 70%;
  padding-left: 10px;
}
.float-label .control:last-child {
  border: 0;
}
.float-label input,
.float-label textarea {/*ブロック化*/
  display: block;
  width: 100%;
  border: 0;
  outline: 0;
  resize: none;
}
.float-label input + label,
.float-label textarea + label {/*labelを設定しつつ、事前に opacity: 0;で非表示にしておく*/
  position: absolute;
  top: 10px;
  transition: top 0.7s ease, opacity 0.7s ease;
  opacity: 0;
  font-size: 13px;
  font-weight: 600;
  color: #ccc;
}
.float-label input:valid + label,
.float-label textarea:valid + label {/*:validを使って入力されたら表示するように設定。フォーカスが外れても表示されたままとする*/
  opacity: 1;
  top: 3px;
}
.float-label input:focus + label,
.float-label textarea:focus + label {/*テキストカラーはフォーカス時のみハイライトする*/
  color: #2c8efe;
}

html

<form class="float-label" spellcheck="false">

  <div class="control">
    <input type="text" name="title" placeholder="タイトル" required />

    <label for="title">タイトル</label>
  </div>
    .
    .
    .
</form>

via

Float Label HTML+CSS Only!