モダンなフォームを作るために覚えておきたいCSSの擬似クラス

• 作成：2016/11/21
• 更新：2016/11/21
• Web制作 >

モダンなフォームを作るために覚えておきたい擬似クラスをまとめました。

エンジニア速報は Twitter の@commteで配信しています。

疑似クラスとは

疑似クラスとはその名の通り疑似的なクラスをCSSで作るということで、指定したセレクタや外的要因に対し要素「全体」にスタイル変更を加えるものです（例「:hover」を指定した要素全てに対し、マウスポインタが乗った時の見え方をCSSを追加する）。

擬似要素は指定した文字などの「一部」に対し見え方を変更したり、コンテンツ（要素）をCSSの中で追加できます（::afterとか::first-letter）。見分け方としては擬似クラスはコロン一つ（:）、疑似要素はコロン２つ（::）。いずれも、html内に直接マークアップする事が好ましくない場合などに使います。

CSSの疑似クラスはセレクタに付加するキーワードであり、選択される要素に対して特定の状態を指定します。例えば :hover 疑似クラスは、選択した要素上にマウスカーソルがあるときにスタイルを適用します。疑似クラス (Pseudo-classes) - CSS | MDN

疑似クラスと疑似要素の違いについては今回の記事では詳しく説明しませんが、非常に分かりやすい記事がありましたので興味ある方はこちらを御覧ください。

擬似クラスと擬似要素を複数指定する方法 | 株式会社bridge

フォームバリデーションの対応状況はこちら。

Can I use

:valid

入力フォームなどで記入ミスをチェックするバリデーションを疑似クラスを使ってスタイルを変更します。

フォームに入力した値が正しい時（type属性と合っているか判定。電話番号とかメールアドレスパターンと一致するかどうか判定して応答します。）には:validでスタイルを適用します。値が正しくない場合は:invalidを適用します。

下記の場合、フォームにURLを入力するとフォーム内が緑色になります。

input:invalid {
  background: red;
}
input:valid {
  background: blue;
}

CSS4 :valid :invalid の使い方とブラウザ対応状況 | q-Az

:required

htmlのrequired属性は入力フォームを必須にさせますが、スタイルシートで:requiredを指定すると入力を必須にしている要素のスタイルを変更できます。

input:required {
  border-color: red;
}

:required | CSS-Tricks

:optional

それでは、入力必須でない場合には何を使うとよいのでしょうか。入力を必須にしていない時は:optionalを使います。

input:optional {
  border-color: blue;
}

:read-only

html5のreadonly属性を使うと、指定した箇所をユーザーは変更できなくなります。

ユーザーが変更できる要素にスタイルを適用したい場合は:read-writeでスタイルを指定します。

input:read-only {
  background: darkgrey;
}
input:read-write {
  border-color: blue;
}