form{margin: 20px;} form label{width: 100px;display: inline-block;} form input:focus:required:invalid{ background: #f2f0aa; outline: none; } form input[type=text]:focus:not([pattern]):required:invalid{background: #fff; } form .val{ font-size:12px;background: #9e3033;color: #fff;display: none;padding: 3px;text-align: center;width: 260px;} form input:focus + .val{ display: inline-block; } form input:focus:required:valid + .val{ background: #0aab4a; } form input:focus:required:valid + .val .invalid { display: none; } form input:focus:required:invalid + .val .valid{ display: none; } form input:required:valid{background-color: #eee;}
<form> <div> <label for="msg">おなまえ</label> <input type="text" id="msg" name="msg" placeholder="田中太郎" required /> </div> <div> <label for="email">メール</label> <input type="email" id="email" name="email" placeholder="[email protected]" required /> <p class="val"> <span class="invalid">正しいメールアドレス入れてくださいまし。</span> <span class="valid">正しいメールアドレスです。</span> </p> </div> <div> <label for="tel">電話番号</label> <input type="tel" id="tel" name="tel" pattern="\d{10}" placeholder="0312345678" required /> <p class="val"> <span class="invalid">入力は数字のみでお願いします</span> <span class="valid">おっけーです!</span> </p> </div> <div> <label for="address">おところ</label> <input id="address" name="address" type="text" required /> </div> <div> <label for="postcode">郵便番号</label> <input id="postcode" name="postcode" type="number" min="001000" max="9999999" maxlength="7" required /> <p class="val"> <span class="invalid">字数が足りないか数字以外が混ざってるっぽいです</span> <span class="valid">おっけーです!</span> </p> </div> <div> <label for="state">都道府県</label> <select name="state" id="state"> <option>東京</option> <option>大阪</option> <option>広島</option> <option selected>京都</option> <option>長崎</option> </select> </div> <div> <label for="password">パスワード</label> <input id="password" name="password" type="password" pattern="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*" required /> <p class="val"> <span class="invalid">大文字、小文字、数字を含めて8文字以上です</span> <span class="valid">おっけーです!</span> </p> </div> <div> <input type="submit" value="送信" /> </div> </form>