入力されたらinputを変化させる方法を解説します。【正しい内容が入力されたか】:valid「正しい内容が」入力されたか判断するにはCSSの疑似クラス「:valid」を使います。下記の例は正しいと青背景に、間違っていると赤背景になります。「:valid」は入力系inputやテキストエリアの入力内容が正しいときに機能します。同様に「:invalid」は入力内容が間違っているときに機能します。正誤の例としては「type="email"」の入力内容に@が含まれなかったり、全角が入力されていると「誤」です。requiredは必須項目に記述するhtml属性です。requiredがあるのに空白だと「誤」、requiredがない状態(任意項目)なら未入力でも「正」です。すべての項目が:validで設定したデザインになっていれば送信できる状態にあるといえるでしょう。CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。正誤に関係なく「なんでもいいから」入力されたか判断するにはCSSの疑似クラス「:placeholder-shown」を使います。下記の例は入力済みだと青背景に、未入力だと赤背景になります。placeholderもvalueもあり「:placeholder-shown」はplaceholderが表示されているときに機能します。逆に言えば入力されるとplaceholderは消えて「:placeholder-shown」が機能しなくなります。よってふつうのinputに入力済みの状態を設定して「:placeholder-shown」に未入力の状態を設定します。※クラス、疑似クラス等セレクタを追加するときは優先順位に注意しましょう。「:placeholder-shown」を使うにはplaceholderが必須です。placeholderは入力する前に文字を表示させるhtml属性です。例の表示などによく使います。"」のように半角スペースを入れておきましょう。placeholderが設定できない(無効になる)html(type="time"など)には使えません。requiredがない「type="text"」のinputしかないフォームであればこちらの方法がいいでしょう。何のためにinputを変化させるのかを考え、目的に応じて「:valid」か「:placeholder-shown」かその両方を使いましょう。以上、入力されたらinputを変化させる方法でした。「この記事の内容がよくわからなかった...」「なんかうまくいかなかった...」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。わからないまま突き進むより基本を学ぶのが結局近道です。htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。マンガでわかるホームページ。