:required

CSS の :required 疑似クラスは、 required 属性が設定されている <input>, <select>, <textarea> 要素を表します。

/* 必須の <input> をすべて選択 */
input:required {
  border: 1px dashed red;
}

この疑似クラスは、フォームを送信する前に有効なデータを持っている必要がある入力欄を強調表示するのに便利です。

構文

:required

例

例は :invalid を参照してください。

アクセシビリティへの配慮

入力が必須の <input> には required 属性を適用してください。これによって、読み上げソフトなどの支援技術を使用している人が、フォームを送信するためにどの入力欄が有効なコンテンツを必要とするかを理解することができます。

フォームに任意の入力欄も含まれている場合、必須の入力欄を視覚的に示すのを色だけに依存しないようにしてください。通常、説明する文字列やアイコンが使用されます。

• MDN WCAG を理解する ― ガイドライン 3.3 の解説
• Understanding Success Criterion 3.3.2 | W3C Understanding WCAG 2.0

仕様策定状況

ブラウザーの対応

このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。

関連項目

• 他の検証関連の疑似クラス: :optional, :invalid, :valid
• フォームデータの検証