やりたいこと
・最初は赤枠がついてない状態でスタートして、空欄の場合で送信などがされた場合に赤枠が表示されるという仕組みを作りたい
・その後に文字が入力されたら赤枠が消えるという仕組み
「名前」「問い合わせ内容」「パスワード」からフォーカスが外れた時(入力が終わった時)が空の場合、入力欄の枠線を赤に切り替える処理を作成しているのですが、自動的に赤枠を付ける外すということが出来ません。
赤枠がついたままになってしまいます。
自分が試したことは、下記のとおりです。
CSS
1.entry-field:invalid:required{border: solid 1px red;}
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <header> 9 </header> 10 <form> 11 <div class="form-item"> 12 <p>名前:</p> 13 <input class="entry-field" type="text" name="name" placeholder="名前を入力してください" value="" required > 14 </div> 15 16 <div class="form-item"> 17 <p>問い合わせ内容:</p> 18 <textarea class="entry-field" rows="5" name="inquiry" value="" required></textarea> 19 </div> 20 21 <div class="form-item"> 22 <p>パスワード:</p> 23 <input class="entry-field" type="password" placeholder="Enteer password." name="pass" value="" required> 24 </div> 25 <p></p> 26 <button class="btn-flat-border" type="submit">送信</button> 27 <button class="btn-flat-border" type="reset">リセット</button> 28 </from> 29 </body> 30</html>
回答1件
あなたの回答
tips
プレビュー