【html/CSS】入力されたらinputを変化させる方法

「入力漏れに気づけるよう、入力済みのテキストボックスの色を変えたい！」

入力されたらinputを変化させる方法を解説します。

【正しい内容が入力されたか】:valid

「正しい内容が」入力されたか判断するにはCSSの疑似クラス「:valid」を使います。

下記の例は正しいと青背景に、間違っていると赤背景になります。

emailであるため正
emailではないため誤
任意入力なら空欄は正
必須入力なら空欄は誤
必須入力で入力されていれば正

<style>
:valid{/*正しい*/
    background: #d5f7fc;
}
:invalid{/*間違い*/
    background: #ffc8c8;
}
</style>
<input type="email" value="aaa@gmail.com"> emailであるため正<br>
<input type="email" value="入力済み"> emailではないため誤<br>
<input type="text" value=""> 任意入力なら空欄は正<br>
<input type="text" value="" required> 必須入力なら空欄は誤<br>
<input type="text" value="入力済み" required> 必須入力で入力されていれば正

「:valid」は入力系inputやテキストエリアの入力内容が正しいときに機能します。

同様に「:invalid」は入力内容が間違っているときに機能します。

正誤の例としては「type="email"」の入力内容に@が含まれなかったり、全角が入力されていると「誤」です。

requiredは必須項目に記述するhtml属性です。requiredがあるのに空白だと「誤」、requiredがない状態（任意項目）なら未入力でも「正」です。

すべての項目が:validで設定したデザインになっていれば送信できる状態にあるといえるでしょう。

【なんでもいいから入力されたか】

正誤に関係なく「なんでもいいから」入力されたか判断するにはCSSの疑似クラス「:placeholder-shown」を使います。

下記の例は入力済みだと青背景に、未入力だと赤背景になります。

<style>
input{/*入力済み*/
    background: #d5f7fc;
}
:placeholder-shown{/*未入力*/
    background: #ffc8c8;
}
</style>
<input type="email" value="" placeholder=" "> placeholder空白<br>
<input type="email" value="" placeholder="placeholderあり"> placeholderあり<br>
<input type="email" value="入力済み" placeholder=" "> placeholderもvalueもあり

「:placeholder-shown」はplaceholderが表示されているときに機能します。

逆に言えば入力されるとplaceholderは消えて「:placeholder-shown」が機能しなくなります。

よってふつうのinputに入力済みの状態を設定して
「:placeholder-shown」に未入力の状態を設定します。

※クラス、疑似クラス等セレクタを追加するときは優先順位に注意しましょう。

「:placeholder-shown」を使うにはplaceholderが必須です。

placeholderは入力する前に文字を表示させるhtml属性です。例の表示などによく使います。

何の文字も表示させたくないときは「placeholder=" "」のように半角スペースを入れておきましょう。

placeholderが設定できない（無効になる）html（type="time"など）には使えません。

requiredがない「type="text"」のinputしかないフォームであればこちらの方法がいいでしょう。

【まとめ】入力されたらinputを変化させる方法

正しい内容が入力されたら→「:valid」

なんでもいいから入力されたら→「:placeholder-shown」

何のためにinputを変化させるのかを考え、目的に応じて「:valid」か「:placeholder-shown」かその両方を使いましょう。

以上、入力されたらinputを変化させる方法でした。