css [css：annotation（invalid）] HTML5インプット群バリデーションのアノテーションをCSS実装する。＃css

Posted 2021-05-13

<form action="hoge.php">
<div>
  <p class="req">氏名</p>
  <input type="text" placeholder="氏名" name="text" required autoforcus />
  <p class="error">
    <span class="invalid">(!) 名前を入力して下さい</span>
  </p>
</div>
<div>
  <p class="req">メールアドレス</p>
  <input type="email" placeholder="メールアドレス" name="email"
         pattern="[\w\d_-]+@[\w\d_-]+\.[\w\d._-]+" required />
  <p class="error">
    <span class="invalid">(!) 正しいメールアドレスの形式で入力して下さい</span>
  </p>
</div>
<div>
  <p>電話番号</p>
  <input type="tel" placeholder="電話番号" name="tel"
         pattern="^\d{11}$|^\d{3,4}-\d{3,4}-\d{4}$"/>
  <p class="error">
    <span class="invalid">(!) 正しい電話番号の形式で入力して下さい</span>
  </p>
</div>
<div>
<p>弊社を何でお知りになりましたか？</p>
  <ul>
    <li><label><input type="checkbox" value="c_official">弊社の公式ウェブサイト</label></li>
    <li><label><input type="checkbox" value="c_blog">技術ブログ</label></li>
    <li><label><input type="checkbox" value="c_friend">友人の紹介</label></li>
    <li><label><input type="checkbox" value="c_other">その他</label><br />
    <input type="text" name="otherComment" id="otherComment" placeholder="ご記入ください"></li>
  </ul>
</div>
<button type="submit">送信する</button>
</form>

/* NGなら赤くする */
form input:focus:invalid {
  border : tomato 2px solid;
}
/* 操作中、入力値が正しい場合は、不正エラーを消す */
form input:focus:valid + .error .invalid {
  display : none;
}
/* OKなら、その他のテキストボックス以外を緑にする */
form input:valid:not(:last-child) {
  border : seagreen 2px solid;
}